/* ================================================================
   Sensei-Rams Design Tokens — Industrial Functionalist System
   "Less, but better" — Dieter Rams
   ================================================================
   Core palette: Braun warm-grey scale (1960–1990).
   Color is ALWAYS semantic — never decorative. NO gradients.
   ================================================================ */

:root {
  /* ---- Core Warm-Grey Scale (Braun-Derived "Chassis") ---- */
  --rams-chassis:    #F2F2F2;   /* Page background — the instrument "case" */
  --rams-module:     #E6E6E6;   /* Card/container background */
  --rams-panel:      #D9D9D9;   /* Inset sections, table headers, input bg */
  --rams-line:       #CCCCCC;   /* Borders, dividers, structure lines */
  --rams-muted:      #757575;   /* Disabled text, metadata, secondary labels - Darkened for AA Contrast */
  --rams-foreground: #1A1A1A;   /* Primary text */

  /* ---- Functional Accent Colors (Semantic ONLY) ---- */
  --rams-orange:  #FFBE00;      /* Primary action, active indicator, focus ring */
  --rams-green:   #2D8C3C;      /* Success, operational, valid */
  --rams-red:     #D62D2D;      /* Error, critical, stop, danger */
  --rams-steel:   #4A90E2;      /* Information, links */

  /* ---- Legacy token aliases (backward compat with existing templates) ---- */
  --color-primary-600: var(--rams-orange);
  --color-primary-700: #E5AB00;
  --color-primary-800: #CC9800;
  --color-surface:       var(--rams-chassis);
  --color-surface-muted: var(--rams-chassis);
  --color-border:        var(--rams-line);
  --color-text-strong:   var(--rams-foreground);
  --color-text:          var(--rams-foreground);
  --color-text-muted:    var(--rams-muted);
  --color-success:       var(--rams-green);
  --color-warning:       var(--rams-orange);
  --color-danger:        var(--rams-red);
  --color-info:          var(--rams-steel);

  /* ---- Compatibility aliases (legacy + module styles) ---- */
  --font-mono:           var(--font-family-mono);
  --rams-font-mono:      var(--font-family-mono);
  --rams-text:           var(--rams-foreground);
  --rams-text-muted:     var(--rams-muted);
  --rams-border:         var(--rams-line);
  --rams-surface-alt:    var(--rams-panel);

  /* ---- Typography ---- */
  --font-family-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --font-mono: var(--font-family-mono);
  --font-size-3xs:  0.5rem;     /* 8px — timestamps */
  --font-size-2xs:  0.625rem;   /* 10px — Dymo labels, status */
  --font-size-xs:   0.75rem;    /* 12px — secondary labels */
  --font-size-sm:   0.875rem;   /* 14px — body text */
  --font-size-base: 0.875rem;   /* 14px — primary content (dense) */
  --font-size-lg:   1rem;       /* 16px — subheadings */
  --font-size-xl:   1.125rem;   /* 18px — section headers */
  --font-size-h3:   1.125rem;
  --font-size-h2:   1.25rem;    /* 20px — page titles */
  --font-size-h1:   1.5rem;     /* 24px — dashboard metrics */
  --font-size-small: var(--font-size-sm);
  --line-height-tight: 1.25;
  --line-height-base:  1.5;

  /* ---- Spacing (4px Grid — All measurements MUST be multiples of 4) ---- */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;

  /* ---- Border Radius (Sharp — NOT Pill Shapes) ---- */
  --radius-none: 0;
  --radius-sm: 2px;             /* Buttons, inputs — DEFAULT */
  --radius-md: 4px;             /* Cards, containers */
  --radius-lg: 8px;             /* MAXIMUM (modals only) */

  /* ---- Shadows (Inset ONLY — NO drop shadows) ---- */
  --shadow-rams-inset:   inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.05);
  --shadow-rams-pressed: inset 0 2px 4px rgba(0,0,0,0.1);
  --shadow-rams-focus:   0 0 0 2px rgba(255,190,0,0.3);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* ---- Transitions (200ms ABSOLUTE MAX — mechanical feel) ---- */
  --transition-instant: 50ms;
  --transition-fast:    100ms;
  --transition-normal:  150ms;
  --transition-slow:    200ms;

  /* ---- Z-indices ---- */
  --zindex-header:    100;
  --zindex-skip-link: 200;
  --zindex-modal:     300;
  --zindex-bezel:     400;

  /* ---- Handheld (WMS Devices) ---- */
  --color-handheld-online:  var(--rams-foreground);
  --color-handheld-offline: #333333;
  --color-handheld-warning: #4A4A4A;
  --color-handheld-text:    var(--rams-chassis);
}

/* ============================================
   Dark Mode & Themes — Configuration
   ============================================ */

/* ---- Dark Mode Overrides ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --rams-chassis:    #121212;
    --rams-module:     #1E1E1E; /* 0dp + 1 overlay */
    --rams-panel:      #2C2C2C; /* Surface overlay */
    --rams-line:       #424242;
    --rams-muted:      #A0A0A0;
    --rams-foreground: #E0E0E0;
    
    --rams-orange:     #FFD740; /* Brighter orange for dark mode */
    --rams-green:      #69F0AE;
    --rams-red:        #FF5252;
    --rams-steel:      #448AFF;

    --color-primary-600: var(--rams-orange);
    --color-surface:       var(--rams-chassis);
    --color-surface-muted: var(--rams-module);
    --color-border:        var(--rams-line);
    --color-text:          var(--rams-foreground);
    --color-text-muted:    var(--rams-muted);

    /* Form Variable Overrides (must be manual as they are computed on :root) */
    --form-control-bg: var(--rams-panel);
    --form-control-border: var(--rams-line);
    --form-control-border-focus: var(--rams-orange);
    --form-control-text: var(--rams-foreground);
    --form-control-placeholder: var(--rams-muted);
    --form-focus-shadow: 0 0 0 2px rgba(255, 215, 64, 0.35);
    --form-error-bg: rgba(255, 82, 82, 0.1);
    --form-error-border: var(--rams-red);
    --form-error-text: var(--rams-red);
    --form-success-bg: rgba(105, 240, 174, 0.1);
    --form-success-border: var(--rams-green);
    --form-success-text: var(--rams-green);
  }
}

/* Explicit Dark Mode Class (for toggle) */
body.dark-mode {
    --rams-chassis:    #121212;
    --rams-module:     #1E1E1E;
    --rams-panel:      #2C2C2C;
    --rams-line:       #424242;
    --rams-muted:      #A0A0A0;
    --rams-foreground: #E0E0E0;
    
    --rams-orange:     #FFD740;
    --rams-green:      #69F0AE;
    --rams-red:        #FF5252;
    --rams-steel:      #448AFF;

    --color-primary-600: var(--rams-orange);
    --color-surface:       var(--rams-chassis);
    --color-surface-muted: var(--rams-module);
    --color-border:        var(--rams-line);
    --color-text:          var(--rams-foreground);

    /* Form Overrides */
    --form-control-bg: var(--rams-panel);
    --form-control-border: var(--rams-line);
    --form-control-border-focus: var(--rams-orange);
    --form-control-text: var(--rams-foreground);
    --form-label-color: var(--rams-muted);
    --form-control-placeholder: var(--rams-muted);
    --form-focus-shadow: 0 0 0 2px rgba(255, 215, 64, 0.35);
    
    --form-error-bg: rgba(255, 82, 82, 0.1);
    --form-error-border: var(--rams-red);
    --form-error-text: var(--rams-red);
    
    --form-success-bg: rgba(105, 240, 174, 0.1);
    --form-success-border: var(--rams-green);
    --form-success-text: var(--rams-green);
}

/* ---- Personalization Themes (Accent Overrides) ---- */

/* Theme: Blue */
body.theme-blue {
    --rams-orange: #2196F3;
    --form-control-border-focus: #2196F3;
    --form-focus-shadow: 0 0 0 2px rgba(33, 150, 243, 0.35);
    --shadow-rams-focus: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

/* Theme: Green */
body.theme-green {
    --rams-orange: #00C853;
    --form-control-border-focus: #00C853;
    --form-focus-shadow: 0 0 0 2px rgba(0, 200, 83, 0.35);
    --shadow-rams-focus: 0 0 0 2px rgba(0, 200, 83, 0.3);
}

/* Theme: Purple */
body.theme-purple {
    --rams-orange: #7C4DFF;
    --form-control-border-focus: #7C4DFF;
    --form-focus-shadow: 0 0 0 2px rgba(124, 77, 255, 0.35);
    --shadow-rams-focus: 0 0 0 2px rgba(124, 77, 255, 0.3);
}

/* Theme: Red */
body.theme-red {
    --rams-orange: #D50000;
    --form-control-border-focus: #D50000;
    --form-focus-shadow: 0 0 0 2px rgba(213, 0, 0, 0.35);
    --shadow-rams-focus: 0 0 0 2px rgba(213, 0, 0, 0.3);
}