/* ==========================================================================
   Design tokens — "cool steel" theme
   Two-layer system: raw palette primitives, then semantic aliases that
   components actually consume. Retheming later = edit this file only.
   ========================================================================== */

:root {
  /* ---- Raw palette: steel gray scale (near-black -> white) ---- */
  --steel-950: #0a0d10;
  --steel-900: #12161a;
  --steel-800: #1b2126;
  --steel-700: #262e35;
  --steel-600: #3a444d;
  --steel-500: #55626d;
  --steel-400: #7c8891;
  --steel-300: #a7b0b8;
  --steel-200: #ccd2d7;
  --steel-100: #e6e9eb;
  --steel-50: #f4f5f6;
  --white: #ffffff;

  /* ---- Raw palette: blue accent scale ---- */
  --blue-900: #0b2a4a;
  --blue-700: #14487a;
  --blue-500: #2b6cb0;
  --blue-400: #4d8fd6;
  --blue-300: #7fb0e6;

  /* ---- Semantic aliases ---- */
  --color-bg: var(--steel-950);
  --color-surface: var(--steel-900);
  --color-surface-raised: var(--steel-800);
  --color-border: var(--steel-700);
  --color-text: var(--steel-100);
  --color-text-muted: var(--steel-400);
  --color-accent: var(--blue-400);
  --color-accent-strong: var(--blue-500);
  --color-focus-ring: var(--blue-300);

  --gradient-hero: linear-gradient(
    160deg,
    var(--steel-950) 0%,
    var(--blue-900) 55%,
    var(--steel-800) 100%
  );

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Sidenav / layout sizing ---- */
  --sidenav-w-collapsed: 64px;
  --sidenav-w-expanded: 272px;
  --topbar-height: 56px;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}