/* =============================================================================
   UNIFIED DESIGN TOKENS — shared by the marketing site, the profile tools and
   (mirrored in /interview/shared.css) the live interview room.

   Concept: "the interviewer's notes". A session is a transcript; the product's
   value is the margin notes a real interviewer never shows you — which phrase
   was a hedge, which answer had no result, which claim had evidence. So:

   Color   Night-navy base (not neutral black) for a calm, focused room.
           Marker yellow is the one loud color: it is literally the
           highlighter on your transcript, and it marks primary actions.
           Signal blue for links/info, green for evidence, coral for gaps.
   Type    Schibsted Grotesk for all UI and headlines (sturdy, editorial,
           legible at dashboard sizes). Newsreader italic is reserved for
           *spoken words* — quoted candidate answers and interviewer lines —
           so speech always reads as speech. DM Mono only for code.
   Rule    Spend the boldness on the transcript + margin-note motif. Keep
           everything else quiet: flat surfaces, thin rules, no glow.

   Variable NAMES are kept from the previous token set so every existing page
   re-skins without markup changes; only the values changed.
   ============================================================================= */

:root {
  /* Core palette */
  --ink: #0E1322;
  --ink-raised: #131A2C;
  --surface: #19213A;
  --surface-hover: #1F2845;
  --surface-glass: rgba(19, 26, 44, 0.86);
  --line: #29324D;
  --line-strong: #3A4566;

  --paper: #F7F5F0;
  --paper-dim: #EFEBE2;

  --text: #E9ECF5;
  --text-dim: #A6AEC6;
  --muted: #737D99;

  --signal: #F5C84B;       /* marker yellow — highlights + primary actions */
  --signal-bright: #FFD970;
  --signal-dim: #8C7330;
  --circuit: #8EA0FF;      /* links / info */
  --circuit-dim: #3F4C8C;
  --evidence: #46C98E;     /* evidence found / positive */
  --evidence-dim: #1F6A4B;
  --alert: #FF6E5E;        /* gap / critical */
  --alert-dim: #7A3129;
  --warn: #FF9F5A;

  /* Gradients — used sparingly: hero backgrounds, primary buttons, score rings */
  --grad-signal: linear-gradient(180deg, #FFD970 0%, #F5C84B 100%);
  --grad-mesh: radial-gradient(ellipse 70% 60% at 80% 0%, rgba(142,160,255,0.08), transparent 60%);
  --grad-card-hover: linear-gradient(160deg, rgba(245,200,75,0.05), transparent 60%);

  /* Elevation — layered, warm-tinted shadows rather than flat black,
     so depth reads as premium rather than muddy on a dark ground */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.36), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.42), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-glow-signal: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 18px rgba(245,200,75,0.18);
  --shadow-glow-circuit: 0 0 0 1px rgba(142,160,255,0.3);

  /* Type */
  --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-quote: 'Newsreader', 'Iowan Old Style', Georgia, serif;   /* spoken words only */
  --font-mono: 'DM Mono', 'SFMono-Regular', Menlo, monospace;      /* code only */

  /* Highlighter: used ONLY to mark evidence/issues inside quoted speech */
  --marker-bg: rgba(245, 200, 75, 0.22);
  --marker-gap-bg: rgba(255, 110, 94, 0.18);
  --marker-good-bg: rgba(70, 201, 142, 0.18);

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.14rem + 0.3vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.38rem + 0.6vw, 1.85rem);
  --step-3: clamp(2rem, 1.7rem + 1.5vw, 2.9rem);
  --step-4: clamp(2.8rem, 2.1rem + 3.2vw, 4.8rem);
  --step-5: clamp(3.4rem, 2.4rem + 4.5vw, 6.2rem);

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

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --max-width: 1240px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}