/* ════════════════════════════════════════════════════════════════════
   Jobi design tokens — single source of truth for both themes.
   Loaded before popup.css. Standalone pages (privacy, terms,
   mic-permission) can't reach this file at runtime, so they inline
   MIRRORED copies of these values — when a palette value changes here,
   update those pages too (each marks its mirror with a comment).
   content/dictation.js is the exception: its companion pill ships the
   approved reference palette (#171717 / salmon #E57371) on every host
   page regardless of theme. Intent and usage rules live in DESIGN.md.
   ════════════════════════════════════════════════════════════════════ */

/* ── Light mode (default) ── */
:root {
  /* Palette — cool premium. Pure white canvas; near-neutral greys with
     the gentlest cool tilt (not blue — anything more saturated than
     this reads cold); ink is a cool near-black so dark surfaces sit
     coherently in the cool field. Orange accent is the brand colour:
     a single warm accent on a cool neutral system. */
  --bg: #ffffff;
  --tint: #f7f8fa;
  --bg2: #f1f2f5;
  --bg-mid: #e5e7eb;
  --bg3: #dcdee3;
  --bg4: #c7cad0;
  --bg-active: #e5e7eb;
  --border: #ebecef;
  --border2: #d1d3d8;
  --khaki-deep: #8a8d94;
  --text: #1a1a1f;
  --text2: #4a4d56;
  --text3: #80848c;
  --text4: #adb1b8;
  --placeholder: #6b6f78; /* darkest muted grey that still reads as a hint; >=4.5:1 on --bg2 */
  /* Ink — cool near-black for dark interactive surfaces (user bubble,
     Apply button, send button, active icon). Slightly darker than
     --text so the surfaces feel deliberate against the cool field
     rather than coincidental. */
  --ink: #1c1c22;
  /* Accent + interactive states. The brand coral is the accent in BOTH themes
     (consistent CTAs) — dark uses a soft coral with dark text; light uses a
     DEEPER coral of the same hue so white text holds contrast on it. Always go
     through these tokens, never hardcode either hex. */
  --accent: #d85a5c;
  --accent-hover: #c84f51;
  --accent-pressed: #b8474a;
  --accent-text: #ffffff;
  --accent-bg: rgba(216, 90, 92, 0.1);
  --select: #8ecabf;
  --select-on: #171717;
  --user-bg: #1c1c22;
  --user-text: #ffffff;
  --ai-bg: #ffffff;
  --ai-border: #ebecef;
  --green: #2d7a4f;
  --green-bg: rgba(45, 122, 79, 0.08);
  --red: #b83232;
  --red-bg: rgba(184, 50, 50, 0.08);
  --blue: #2563a8;
  --blue-bg: rgba(37, 99, 168, 0.08);
  /* Solid blue for buttons/links that must stay blue in both themes. */
  --blue-strong: #2563a8;
  --blue-strong-hover: #1f5490;
  --orange: #d4670a;
  --orange-bg: rgba(212, 103, 10, 0.08);
  /* Chat bubble + chip tokens */
  --ai-bubble: #e9ebf1; /* a touch deeper than --bg2 so it reads against the white canvas */
  --user-bubble: #1c1c22; /* cool near-black */
  --user-bubble-text: #ffffff;
  --chip-hover: #d7f07e;
  --chip-hover-text: #1a1a1a;

  /* Hero surfaces — always-dark cards (page-job banner, Pro cards) that keep
     the coral accent in BOTH themes. Same values in light and dark on
     purpose: these cards do not follow the theme. */
  --hero-bg: #2a2a2a;
  --hero-bg2: #3f3434;
  --hero-accent: #f29fa0;
  --hero-accent-text: #222222;
  --hero-accent-bg: rgba(242, 159, 160, 0.15);
  --hero-accent-bg-hover: rgba(242, 159, 160, 0.26);

  /* Duotone icon tints — the new icon set draws a soft brand-tint fill
     under each stroke (feature icons only; utility glyphs stay line-only).
     The SVGs reference these vars with light fallbacks baked in, so dark
     MUST override them here or the light sage/salmon would glow on dark
     cards. --jobi-paper is the knockout ("paper" holes) = the card surface;
     --jobi-salmon (notif dot) is the coral accent at full strength. */
  --jobi-tint: #d2eae5; /* sage, ~40% over white */
  --jobi-tint-warm: #fbdcdc; /* salmon, warm-semantic icons (alert) */
  --jobi-paper: #ffffff;
  --jobi-salmon: #f29fa0; /* matches --hero-accent */

  /* ── Typography ──
     Fixed px scale for a 360-420px side panel (no fluid type).
     RULE: six text sizes (2xs..lg) + three display sizes (xl..3xl);
     never a size off this scale. Chat + Jobs predate the scale and
     keep their literal (half-pixel) sizes — frozen, do not spread. */
  --font-serif:
    'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* title/display font */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-2xs: 10px; /* badges, chips */
  --fs-xs: 11px; /* uppercase section labels, captions */
  --fs-sm: 12px; /* descriptions, secondary text */
  --fs-base: 13px; /* body, controls, inputs */
  --fs-md: 14px; /* section headers ("Recent applications"), row emphasis */
  --fs-lg: 15px; /* subtitles, large-row emphasis */
  --fs-xl: 17px; /* card titles */
  --fs-2xl: 21px; /* screen titles */
  --fs-3xl: 28px; /* onboarding display */
  /* RULE: three line heights — tight for display, snug for UI rows,
     normal for prose. Weights: 400/500/600/700 only. */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  /* Tracking: tight for 14px+ headers/display, caps for uppercase
     eyebrows/labels. Everything else runs untracked. */
  --ls-tight: -0.01em;
  --ls-caps: 0.06em;

  /* ── Spacing — 4px grid with 2px half-steps ──
     RULE: every margin/padding/gap comes off this scale. Whole steps
     (4/8/12/16/20/24/32) are the default rhythm; half-steps (2/6/10/
     14/18/22) are for fine-tuning inside compact rows, matching the
     de facto rhythm of the approved screens. No odd pixel values. */
  --sp-05: 2px;
  --sp-1: 4px;
  --sp-15: 6px;
  --sp-2: 8px;
  --sp-25: 10px;
  --sp-3: 12px;
  --sp-35: 14px;
  --sp-4: 16px;
  --sp-45: 18px;
  --sp-5: 20px;
  --sp-55: 22px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ── Radii ──
     RULE: xs controls-in-rows, sm controls, r inputs/menus, lg cards,
     xl grouped-list outer corners + hero cards, pill for pills. 50%
     for circles; 2-3px micro-radii (bars, thumbnails) may stay literal. */
  --r: 10px;
  --r-sm: 7px;
  --r-xs: 5px;
  --r-lg: 14px; /* cards */
  --r-xl: 18px; /* hero cards (matches .jobcard) */
  --r-pill: 999px;

  /* ── Elevation — flat --bg2 fill is the default surface; shadows are
     for floating layers only. ── */
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.04); /* legacy alias of --shadow-1 */
  --shadow-1: 0 1px 4px rgba(0, 0, 0, 0.04); /* resting card */
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.12); /* popovers, menus */
  --shadow-3: 0 18px 44px rgba(0, 0, 0, 0.2); /* modals */
  /* Focus treatments — ring for buttons/controls, lift for text inputs
     (the input surface steps up and floats; no ring). One of these two,
     never a third convention. */
  --ring: 0 0 0 3px var(--accent-bg);
  --ring-danger: 0 0 0 3px var(--red-bg);
  --shadow-lift: 0 2px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);

  /* ── Glass — translucent surface steps for elements sitting on
     atmospheric backdrops (dark orbs canvas, light parity overrides).
     RULE: rest → hover → pressed, one step per state, same as the
     bg2→bg3→bg-active convention on flat surfaces. ── */
  --glass-1: rgba(0, 0, 0, 0.04);
  --glass-2: rgba(0, 0, 0, 0.07);
  --glass-3: rgba(0, 0, 0, 0.1);

  /* ── Z scale ── */
  --z-dropdown: 40;
  --z-sticky: 60;
  --z-modal-backdrop: 80;
  --z-modal: 90;
  --z-toast: 120;

  /* ── Motion — stronger custom curves than the built-in CSS easings.
     ease-out for enter/press (instant feedback), ease-in-out for
     on-screen movement. ── */
  --t: 0.14s ease;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 130ms; /* button press feedback */
  --dur-pop: 160ms; /* dropdowns, popovers */
}

/* ── Dark mode ── */
body.dark {
  /* Palette — layered depth over near-black, coral accent.
     Inspired by Phantom Wallet, Duolingo 2D, and Octopus Energy. */

  /* Surface layers — create visual hierarchy and depth */
  --bg: #171717; /* Primary background (deepest) */
  --bg2: #1f1f1f; /* Surface 1 (cards, secondary backgrounds) */
  --bg3: #262626; /* Surface 2 (inputs, tertiary backgrounds) */
  --bg4: #2d2d2d; /* Surface 3 (hover states, emphasis) */
  --bg-active: #343434; /* Active Surface (pressed states, active tabs) */
  --border: #3e3e3e; /* Subtle 1px borders */
  --border2: #4a4a4a; /* Secondary borders */
  /* NOTE: --tint / --bg-mid / --khaki-deep are intentionally NOT
     overridden here; rules that must diverge in dark re-anchor
     themselves (see popup.css comments around the interview blues). */

  /* Typography — refined greys with warmth */
  --text: #f7f4f2; /* Primary (highest contrast) */
  --text2: #b5aea8; /* Secondary (reduced contrast) */
  --text3: #8a8480; /* Muted (for supporting text) */
  --text4: #666666; /* Disabled (lowest contrast) */
  --placeholder: #9a9490; /* >=4.5:1 on --bg3 input fill */

  /* Primary accent — coral with interactive states */
  --ink: #f29fa0; /* Main button surface & accent */
  --accent: #f29fa0; /* Primary accent colour */
  --accent-hover: #f6b1b2; /* Hover state */
  --accent-pressed: #e58e8f; /* Pressed state */
  --accent-bg: rgba(242, 159, 160, 0.18); /* Subtle coral tint behind coral text/icons */
  --accent-text: #171717; /* Dark text on solid coral (buttons) */
  --select: #8ecabf; /* Mint — selected option-card surface */
  --select-on: #171717; /* Dark text/tick on mint */

  /* Status colours — solid flat with strong contrast */
  --saved: #d3a64a;
  --saved-text: #171717; /* dark text on gold */
  --saved-bg: #d3a64a;
  --applied: #5d94f2;
  --applied-text: #171717; /* dark text on blue for contrast */
  --applied-bg: #5d94f2;
  --interview: #9b78e8;
  --interview-text: #f7f4f2; /* light text on purple */
  --interview-bg: #9b78e8;
  --offer: #4fc988;
  --offer-text: #171717; /* dark text on green */
  --offer-bg: #4fc988;

  /* Semantic accents — solid hue + subtle tint behind same-hue text/icons.
     The tints MUST stay translucent: they back coloured text (e.g. blue
     status pill text on blue tint), so a solid fill would be text-on-itself. */
  --user-bg: #f7f4f2;
  --user-text: #171717;
  --ai-bg: #1f1f1f;
  --ai-border: #3e3e3e;
  --green: #4fc988; /* Offer green */
  --green-bg: rgba(79, 201, 136, 0.18);
  --red: #e85e5e;
  --red-bg: rgba(232, 94, 94, 0.18);
  --blue: #5d94f2; /* Applied blue */
  --blue-bg: rgba(93, 148, 242, 0.18);
  --blue-strong: #3b82f6;
  --blue-strong-hover: #2563eb;
  --orange: #f29fa0; /* Brand accent → coral */
  --orange-bg: rgba(242, 159, 160, 0.18);

  /* Chat bubble + chip tokens */
  --ai-bubble: #1f1f1f; /* Surface 1 */
  /* User bubble mirrors light mode inverted (dark bubble on white → light
     bubble on near-black): a neutral high-contrast surface, NOT coral, so
     coral stays the single action accent and never clashes with the buttons. */
  --user-bubble: #f7f4f2;
  --user-bubble-text: #171717;
  --chip-hover: #f29fa0;
  --chip-hover-text: #171717;

  /* Duotone icon tints — tuned so sage reads as sage on the dark cards
     (~2.5:1 vs surface: visible, never competing with the stroke). */
  --jobi-tint: #4e6663;
  --jobi-tint-warm: #765556;
  --jobi-paper: #1f1f1f; /* --bg2, the dark card surface behind knockouts */
  --jobi-salmon: #f29fa0;

  /* Shadows — soft and subtle, tinted with accent warmth */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(242, 159, 160, 0.06);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(242, 159, 160, 0.06);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.38);
  --shadow-3: 0 18px 44px rgba(0, 0, 0, 0.6);

  /* Glass — white-alpha over the dark orbs backdrop */
  --glass-1: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.08);
  --glass-3: rgba(255, 255, 255, 0.12);
}

/* ── Job stage palette ──
   Drives card stripes, status pills, JD tags, the summary bar and the
   stage picker, so every surface stays in lockstep.
   Light: darker hues read as text on the pale tints (over white). */
:root {
  --stg-saved: #9a6b12;
  --stg-saved-bg: rgba(214, 158, 46, 0.16); /* amber — saved */
  --stg-applied: #1f5fc0;
  --stg-applied-bg: rgba(45, 111, 224, 0.14); /* blue — applied */
  --stg-interviewing: #6a34c0;
  --stg-interviewing-bg: rgba(124, 58, 237, 0.14); /* violet — interviewing */
  --stg-offer: #11854a;
  --stg-offer-bg: rgba(22, 163, 90, 0.15); /* green — offer */
  --stg-rejected: #c2342c;
  --stg-rejected-bg: rgba(220, 60, 52, 0.14); /* red — rejected */
  --stg-withdrawn: #5b6370;
  --stg-withdrawn-bg: rgba(100, 116, 139, 0.15); /* slate — withdrawn */
  /* No --stg-*-text in light on purpose: consumers fall back to
     var(--text2) (see popup.css .job-status-pill). */
}
/* Dark mode: neutral tag colors with light text for tracker cards. */
body.dark {
  --stg-saved: #3e3e3e;
  --stg-saved-bg: #3e3e3e;
  --stg-saved-text: #f7f4f2;
  --stg-applied: #3e3e3e;
  --stg-applied-bg: #3e3e3e;
  --stg-applied-text: #f7f4f2;
  --stg-interviewing: #3e3e3e;
  --stg-interviewing-bg: #3e3e3e;
  --stg-interviewing-text: #f7f4f2;
  --stg-offer: #3e3e3e;
  --stg-offer-bg: #3e3e3e;
  --stg-offer-text: #f7f4f2;
  --stg-rejected: #3e3e3e;
  --stg-rejected-bg: #3e3e3e;
  --stg-rejected-text: #f7f4f2;
  --stg-withdrawn: #3e3e3e;
  --stg-withdrawn-bg: #3e3e3e;
  --stg-withdrawn-text: #f7f4f2;
}