:root {
  /* ── SCS Brand + HMI Style ── */
  --color-primary:         #C9A227;       /* SCS Gold — active buttons, selected states */
  --color-primary-hover:   #D4A843;       /* Brighter gold hover */
  --color-primary-light:   rgba(201, 162, 39, 0.2);
  --color-secondary:       #0F1B3D;       /* SCS Navy — screen background */
  --color-secondary-hover: #162550;
  --color-accent:          #D4A843;       /* Brighter gold — labels, decorative highlights */
  --color-accent-hover:    #E0B850;
  --color-surface-alt:     #132550;       /* Slightly lighter navy */

  /* ── Semantic Aliases ── */
  --color-surface:         #0F1B3D;
  --color-surface-raised:  #1A2D58;       /* Raised panel bg */
  --color-text:            #C0D0E0;       /* Standard text */
  --color-text-muted:      #7090B0;       /* Dim labels */
  --color-text-on-dark:    #E0E8F0;       /* Bright text */
  --color-text-on-primary: #0F1B3D;       /* Dark navy text on gold (WCAG AA) */

  /* ── Status Colors ── */
  --color-success:  #00E676;
  --color-warning:  #FFD600;
  --color-error:    #FF1744;
  --color-info:     #448AFF;

  /* ── HMI-Specific ── */
  --hmi-panel-border:    #243860;       /* Visible grid lines */
  --hmi-bezel:           #3A3D42;
  --hmi-bezel-inner:     #1A1D22;
  --hmi-status-bar:      #0A1530;       /* Dark navy status bar */
  --hmi-btn-inactive:    #3A4A64;       /* Gray-navy raised buttons */
  --hmi-btn-inactive-text: #B8C4D4;    /* Text on gray buttons */
  --hmi-scanline:        rgba(201, 162, 39, 0.02);
  --hmi-bevel-light:     #687890;       /* Light edge of bevel (top/left) */
  --hmi-bevel-dark:      #080E20;       /* Dark edge of bevel (bottom/right) */
  --hmi-bevel-light-strong: #8898B0;    /* Even lighter for active buttons */
  --hmi-bevel-dark-strong:  #040A18;
  --hmi-inset-light:     #1A2850;       /* Sunken panel inner edge */
  --hmi-inset-dark:      #06101E;       /* Sunken panel outer edge */

  /* ── Neutrals (dark theme) ── */
  --color-white:     #FFFFFF;
  --color-black:     #050812;
  --color-gray-50:   #E0E8F0;
  --color-gray-100:  #C0D0E0;
  --color-gray-200:  #7090B0;
  --color-gray-300:  #506070;
  --color-gray-400:  #3A4A5C;
  --color-gray-500:  #2A3A50;
  --color-gray-600:  #1E2C44;
  --color-gray-700:  #16223A;
  --color-gray-800:  #0F1A30;
  --color-gray-900:  #0A1228;

  /* ── Typography ── */
  --font-body:      'Share Tech Mono', 'JetBrains Mono', 'Fira Code', monospace;
  --font-display:   'Orbitron', 'Share Tech', sans-serif;
  --font-mono:      'Share Tech Mono', 'JetBrains Mono', monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */
  --font-size-5xl:  3rem;      /* 48px */
  --font-size-6xl:  3.75rem;   /* 60px */
  --font-size-7xl:  4.5rem;    /* 72px */

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --line-height-none:     1;
  --line-height-tight:    1.2;
  --line-height-snug:     1.375;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;
  --line-height-loose:    2;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.1em;

  /* ── Spacing (8px base) ── */
  --space-px:  1px;
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */

  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-3xl:  2rem;      /* 32px */
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* ── Transitions ── */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   350ms;
  --duration-slower: 500ms;

  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --max-width-xs:      20rem;    /* 320px */
  --max-width-sm:      24rem;    /* 384px */
  --max-width-md:      28rem;    /* 448px */
  --max-width-lg:      32rem;    /* 512px */
  --max-width-xl:      36rem;    /* 576px */
  --max-width-2xl:     42rem;    /* 672px */
  --max-width-prose:   65ch;
  --max-width-content: 75rem;    /* 1200px */
  --max-width-wide:    90rem;    /* 1440px */

  --header-height:        4.5rem;  /* 72px */
  --header-height-mobile: 4rem;    /* 64px */

  /* ── Z-Index Scale ── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:20;
  --z-sticky:  30;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;
  --z-tooltip: 70;
}