/* ============================================================================
   JobFocus — Design Tokens: Colors & Type
   "Control Room" theme. Warm near-black graphite surfaces, sky-blue signal
   accent, mint for positive pipeline states. Lifted verbatim from the product
   (jobhunt-ui/src/index.css) so designs match the live app exactly.
   (The accent token is still named --amber for a single-flip rename; its value
   is the JobFocus brand blue.)

   Two themes, switched by a data-theme attribute on :root:
     :root                       → dark (default)
     :root[data-theme="light"]   → cool office-paper light

   Fonts load from Google Fonts (same as the app). See fonts/ for the @import.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,400;9..144,0,500;9..144,0,600;9..144,0,900;9..144,1,400;9..144,1,500&family=Hanken+Grotesk:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Surfaces — warm near-black graphite, never flat #000 ------------- */
  --bg: #0c0e13;          /* page */
  --bg-2: #11141b;        /* recessed wells, inputs */
  --panel: #14171f;       /* cards / surfaces (base of gradient) */
  --panel-2: #181c26;     /* top of card gradient */
  --raised: #1e2330;      /* ghost buttons, chips, raised controls */
  --line: #262c3a;        /* default borders */
  --line-soft: #1c212c;   /* hairlines, row separators, grid */

  /* ---- Ink — four-step text ramp --------------------------------------- */
  --ink: #eef1f6;         /* primary text */
  --ink-dim: #aab3c5;     /* secondary / body */
  --ink-faint: #6b7488;   /* labels, meta */
  --ink-ghost: #444c5e;   /* disabled, faintest hints */

  /* ---- Signal palette — sky-blue primary, mint positive ---------------- */
  --amber: #38bdf8;       /* PRIMARY — actions, focus, brand accent (JobFocus blue) */
  --amber-deep: #0ea5e0;  /* gradient end, hover */
  --amber-glow: rgba(56, 189, 248, 0.16);
  --mint: #5ce0a8;        /* positive: applied / offers / matched */
  --mint-deep: #2bbd83;
  --rose: #ff7a8a;        /* danger / missing / rejected */
  --sky: #6fb7ff;         /* info */
  --violet: #b79bff;      /* accent / aggregator source */

  /* ---- Source badge hues ----------------------------------------------- */
  --src-adzuna: #b79bff;
  --src-reed: #ffb347;
  --src-theirstack: #6fb7ff;
  --src-email: #9aa5ba;

  /* ---- CV preview "paper" — always cream so a CV reads as printed ------ */
  --cv-paper: #fdfaf3;
  --cv-paper-ink: #1a1a1a;
  --cv-paper-faint: #555555;
  --cv-paper-rule: #d8c89a;
  --cv-paper-accent: #c08000;

  /* ---- Atmospheric layers (body background) ---------------------------- */
  --atmosphere-tint-a: rgba(56, 189, 248, 0.16);  /* blue, top-right */
  --atmosphere-tint-b: rgba(111, 183, 255, 0.06); /* sky, top-left */
  --grain-opacity: 0.5;
  --grain-blend: overlay;

  /* ---- Type families --------------------------------------------------- */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;        /* display / headings */
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* UI / body */
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* labels / data */
  --brand-font: 'Manrope', var(--sans);                          /* the JobFocus wordmark */

  /* ---- Radius ---------------------------------------------------------- */
  --radius: 14px;         /* cards, panes */
  --radius-sm: 9px;       /* inputs, small controls */
  --radius-btn: 10px;     /* buttons */
  --radius-badge: 6px;    /* source badges */
  --radius-pill: 999px;   /* chips, status pills, toggles */

  /* ---- Elevation ------------------------------------------------------- */
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 28px 60px -28px rgba(0, 0, 0, 0.95);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-rise: cubic-bezier(0.22, 1, 0.36, 1); /* signature entrance ease */
  --dur-fast: 0.14s;
  --dur-base: 0.2s;

  color-scheme: dark;
  font-family: var(--sans);
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--bg);
}

/* ---- Light theme — cool office-paper ---------------------------------- */
:root[data-theme='light'] {
  --bg: #f1f3f7;
  --bg-2: #e8ebf2;
  --panel: #ffffff;
  --panel-2: #f7f8fb;
  --raised: #ffffff;
  --line: #e0e3eb;
  --line-soft: #ebedf3;

  --ink: #1a1f2b;
  --ink-dim: #475061;
  --ink-faint: #8b93a4;
  --ink-ghost: #c5cad4;

  --amber: #0676b8;        /* deepened for AA contrast on white */
  --amber-deep: #055a8f;
  --amber-glow: rgba(6, 118, 184, 0.10);
  --mint: #1e9266;
  --mint-deep: #156c4b;
  --rose: #c93b50;
  --sky: #0e6cc0;
  --violet: #6e4dd9;

  --src-adzuna: #6e4dd9;
  --src-reed: #b86b00;
  --src-theirstack: #0e6cc0;
  --src-email: #5e6a82;

  --atmosphere-tint-a: rgba(6, 118, 184, 0.05);
  --atmosphere-tint-b: rgba(14, 108, 192, 0.04);
  --grain-opacity: 0.10;
  --grain-blend: multiply;

  --shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 2px rgba(20, 30, 60, 0.06);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 36px -18px rgba(20, 30, 60, 0.18);

  color-scheme: light;
}

/* ============================================================================
   SEMANTIC TYPE STYLES
   Apply these classes directly, or copy the declarations. The scale is built
   on three families: Fraunces (display), Hanken Grotesk (UI/body),
   JetBrains Mono (labels & data). Mono is always UPPERCASE + letter-spaced
   for microlabels; never used for body copy.
   ============================================================================ */

/* Display — the hero headline. Fraunces, tight tracking, second phrase in accent italic.
   (The JobFocus wordmark itself is Manrope, upright — see .brand .wm in the page.) */
.t-display {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--ink);
}
.t-display em {
  font-style: italic;
  font-weight: 400;
  color: var(--amber);
}

/* H1 — page / section title */
.t-h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: var(--ink);
}

/* H2 — card / pane title */
.t-h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--ink);
}

/* H3 — sub-head */
.t-h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--ink);
}

/* Body — default running text */
.t-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.t-body-lg {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
}

/* Lead — marketing sub-headline */
.t-lead {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--ink-dim);
}

/* Microlabel — the workhorse mono label. Stats, badges, section eyebrows. */
.t-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Data — tabular numbers (stat values, scores, salaries) */
.t-data {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Mono caption — dates, source labels, system status */
.t-mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--ink-ghost);
}