/* ============================================================================
   Job Hunting Tracker — Design Tokens
   Single source of truth for color, type, spacing, elevation, radii, motion.
   Dark-first. Port these :root vars into a Django base template / global.css.
   ========================================================================== */

:root {
  /* ---- Neutrals: layered elevation on a near-black charcoal base -------- */
  --bg:          #0B0C0F;   /* app canvas — deepest */
  --surface-1:   #101218;   /* chrome: side nav, top bar */
  --surface-2:   #15171F;   /* cards, panels, table */
  --surface-3:   #1B1E27;   /* raised: row hover, menus, inputs */
  --surface-4:   #232733;   /* active row, pressed, tooltip */

  --border:      #23262F;   /* hairline divider (default) */
  --border-soft: #1C1F27;   /* barely-there separators */
  --border-strong:#2E3340;  /* emphasized edges, input focus base */

  /* ---- Foreground / text ramp ------------------------------------------ */
  --fg:          #E9EBF0;   /* primary text */
  --fg-strong:   #FFFFFF;   /* rare: numbers, key headings */
  --muted:       #A0A6B4;   /* secondary text, labels */
  --faint:       #6C7280;   /* tertiary, metadata, placeholders */
  --disabled:    #474C58;

  /* ---- Accent: one confident electric indigo --------------------------- */
  --accent:        #6366F1;
  --accent-hover:  #7A7DF6;
  --accent-press:  #5457E0;
  --accent-fg:     #FFFFFF;            /* text on solid accent */
  --accent-text:   #A5A8FB;            /* accent as text on dark */
  --accent-soft:   rgba(99, 102, 241, 0.14);  /* tinted fills */
  --accent-line:   rgba(99, 102, 241, 0.38);  /* tinted borders */
  --accent-ring:   rgba(99, 102, 241, 0.45);  /* focus ring */

  /* ---- Semantic (status / signals) — calm, not garish ------------------ */
  --success:     #3FB984;  --success-soft: rgba(63, 185, 132, 0.13);
  --warn:        #E0A04D;  --warn-soft:    rgba(224, 160, 77, 0.13);
  --danger:      #E5705B;  --danger-soft:  rgba(229, 112, 91, 0.13);
  --info:        #5BA8E5;  --info-soft:    rgba(91, 168, 229, 0.13);

  /* ---- Score language: high fit = accent/strong, low = muted ----------- */
  --score-high:  #6366F1;  --score-high-soft: rgba(99, 102, 241, 0.16);   /* 8–10 */
  --score-mid:   #8E93B5;  --score-mid-soft:  rgba(142, 147, 181, 0.13);  /* 5–7  */
  --score-low:   #6A6E7C;  --score-low-soft:  rgba(106, 110, 124, 0.12);  /* 1–4  */

  /* ---- Typography ------------------------------------------------------- */
  --font-ui: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
             "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code",
               Menlo, monospace;

  /* fluid-ish fixed scale — 1.20 ratio */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;   /* base UI */
  --text-lg:  16px;
  --text-xl:  19px;
  --text-2xl: 23px;
  --text-3xl: 28px;
  --text-4xl: 34px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  --fw-read:    420;
  --fw-medium:  520;
  --fw-strong:  600;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ---- Radii ----------------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;
  --r-xl: 16px; --r-pill: 999px;

  /* ---- Elevation: soft, low-contrast shadows on dark ------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 4px 14px -4px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.35);
  --shadow-3: 0 16px 40px -12px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.40);
  --shadow-focus: 0 0 0 3px var(--accent-ring);

  /* ---- Motion: restrained ---------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 110ms;
  --t-med:  180ms;

  /* ---- Layout ---------------------------------------------------------- */
  --nav-w: 244px;
  --topbar-h: 56px;
  --maxw: 1320px;
}

/* Optional light theme hook — tokens flip here, components stay the same.
   Kept minimal; dark is the product's primary surface. */
:root[data-theme="light"] {
  --bg: #F7F8FA;       --surface-1: #FFFFFF;  --surface-2: #FFFFFF;
  --surface-3: #F0F2F6; --surface-4: #E7EAF0;
  --border: #E4E7EE;   --border-soft: #EEF0F4; --border-strong: #D4D9E3;
  --fg: #14161C;       --fg-strong: #000000;   --muted: #565C6B; --faint: #8B91A0;
  --accent-text: #4C4FE0; --accent-soft: rgba(99,102,241,0.10);
  --shadow-1: 0 1px 2px rgba(20,22,28,0.06);
  --shadow-2: 0 6px 18px -6px rgba(20,22,28,0.14);
  --shadow-3: 0 18px 44px -14px rgba(20,22,28,0.20);
}