/* ==========================================================================
   CareerPilot AI — Design Tokens
   Direction: flight-instrument panel. CareerPilot navigates a career the
   way a pilot navigates a route — headings, waypoints, gauges, a steady
   panel of dials rather than a mood board. Every score in the product
   (ATS score, resume strength, keyword match) is expressed as a gauge,
   echoing the hero.
   ========================================================================== */

:root {
  /* ---- Color: paper + panel, not cream + terracotta ---- */
  --color-paper: #F5F6F2;          /* cool, slightly grey-green paper */
  --color-paper-alt: #EBEDE7;
  --color-panel: #0E2038;          /* deep instrument-panel navy */
  --color-panel-2: #16304F;        /* lighter navy for panel gradients */
  --color-ink: #101E33;            /* primary text on paper */
  --color-ink-soft: #4A5A70;       /* secondary text on paper */
  --color-paper-ink: #E7ECF3;      /* primary text on panel */
  --color-paper-ink-soft: #9FB0C6; /* secondary text on panel */

  --color-amber: #E39A34;          /* instrument amber — primary accent / CTA */
  --color-amber-dim: #91611C;
  --color-signal: #3569C0;         /* signal blue — links, secondary accent */
  --color-signal-dim: #2C5BAE;
  --color-good: #3E8F63;           /* pass / on-course */
  --color-warn: #C1481F;           /* off-course / needs attention */

  --color-line: #D9DCD3;           /* hairline on paper */
  --color-line-panel: #29435F;     /* hairline on panel */

  /* ---- Type ---- */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", "Consolas", monospace;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem);
  --step-3: clamp(2rem, 1.7rem + 1.3vw, 2.75rem);
  --step-4: clamp(2.6rem, 2.1rem + 2.2vw, 4rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;
  --gap: 1.5rem;

  --shadow-panel: 0 20px 60px -25px rgba(14, 32, 56, 0.45);
  --shadow-card: 0 1px 2px rgba(16, 30, 51, 0.06), 0 8px 24px -16px rgba(16, 30, 51, 0.12);

  --ease-flight: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: #10233F;
    --color-paper-alt: #16304F;
    --color-ink: #E7ECF3;
    --color-ink-soft: #9FB0C6;
    --color-line: #29435F;
  }
}

[data-theme="dark"] {
  --color-paper: #10233F;
  --color-paper-alt: #16304F;
  --color-ink: #E7ECF3;
  --color-ink-soft: #9FB0C6;
  --color-line: #29435F;
}