/* Job Portal — design tokens (redesign 2026-11).
   One source for colour, type, spacing, radius and elevation. Drop-in replacement for the :root block
   at the top of portal/assets/styles/app.css.

   Theme switching:
   - <html> without data-theme  → follows the device (prefers-color-scheme)
   - <html data-theme="light">  → always light
   - <html data-theme="dark">   → always dark
   The user's choice (System / Light / Dark) lives in Settings → Appearance (User::$theme), rendered on <html>
   by base.html.twig so there is no flash on load. "Larger text" sets <html data-text="large">. */

@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-400-normal-tgeBUz0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-400-italic-KuOvAlp.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-600-normal-WFbedGL.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-700-normal-QPABG8D.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-400-normal-l1dy4Yv.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-400-italic-SYLRdsm.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-600-normal-WssM5Wg.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* ── Type ─────────────────────────────── */
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-display: 600 2.25rem/1.12 var(--font-serif);   /* 36px — page greeting, onboarding titles */
  --text-h1:      600 1.75rem/1.2 var(--font-serif);    /* 28px — page titles */
  --text-h2:      600 1.3125rem/1.3 var(--font-serif);  /* 21px — section titles */
  --text-h3:      600 1.0625rem/1.4 var(--font-sans);   /* 17px — card titles, job titles */
  --text-body:    400 1rem/1.55 var(--font-sans);       /* 16px — everything readable */
  --text-small:   400 .875rem/1.45 var(--font-sans);    /* 14px — meta, hints */
  --text-label:   600 .875rem/1.4 var(--font-sans);     /* 14px — form labels, buttons-sm */
  --text-caps:    700 .75rem/1.3 var(--font-sans);      /* 12px — overlines, letter-spaced */

  /* ── Spacing (4px base) ───────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ── Radius ───────────────────────────── */
  --radius-sm: 8px;    /* inputs, small buttons, chips */
  --radius-md: 12px;   /* buttons, tiles */
  --radius-lg: 18px;   /* cards, sheets */
  --radius-pill: 999px;

  /* ── Layout ───────────────────────────── */
  --content-max: 1080px;   /* app width on desktop */
  --reading-max: 680px;    /* forms, onboarding, single-column pages */
  --topbar-h: 64px;
  --tabbar-h: 68px;
  --tap: 44px;             /* minimum touch target */

  /* ── Motion ───────────────────────────── */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms; --dur: 200ms;

  /* ── Colour: light (default) ──────────── */
  --bg: #f8f6f2;            /* page — warm paper */
  --surface: #ffffff;       /* cards, sheets, inputs */
  --surface-2: #f2efe9;     /* hover, quiet fills, segmented track */
  --surface-3: #e9e5dd;     /* pressed, progress track */
  --ink: #1c1f23;           /* primary text */
  --ink-2: #4a515a;         /* secondary text */
  --ink-3: #636a74;         /* meta, hints, placeholders (4.5:1+ on bg, surface and surface-2) */
  --line: #e6e1d8;          /* hairlines, card borders */
  --line-strong: #cfc7ba;   /* input borders */
  --accent: #b4441f;        /* terracotta — ONE primary action per view, active nav */
  --accent-hover: #983818;
  --accent-ink: #ffffff;    /* text on --accent */
  --accent-soft: #f8e8e0;   /* selected chips, active nav background */
  --accent-text: #a13c1b;   /* accent used as text on --bg / --surface */
  --ok: #2b7448;   --ok-soft: #e3f1e8;
  --warn: #8a5d05; --warn-soft: #fbf1d9;
  --info: #2c5d97; --info-soft: #e5eef9;
  --bad: #b1281f;  --bad-soft: #fbe6e3;
  --focus: #2c5d97;
  --shadow-1: 0 1px 2px rgba(28, 31, 35, .05), 0 1px 1px rgba(28, 31, 35, .03);
  --shadow-2: 0 2px 6px rgba(28, 31, 35, .06), 0 12px 32px rgba(28, 31, 35, .08);
  --scrim: rgba(20, 22, 25, .38);
  color-scheme: light;
}

/* ── Colour: dark ─────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131416; --surface: #1b1d20; --surface-2: #23262a; --surface-3: #2d3035;
    --ink: #edebe7; --ink-2: #b9bdc3; --ink-3: #8f949b;
    --line: #2b2e33; --line-strong: #3d4248;
    --accent: #e8825f; --accent-hover: #f09a7b; --accent-ink: #1d0f09; --accent-soft: #3a2219; --accent-text: #f0997a;
    --ok: #79c899; --ok-soft: #1c3226; --warn: #e5bb5c; --warn-soft: #362d1b;
    --info: #8bb7ee; --info-soft: #1c2a3b; --bad: #f2948d; --bad-soft: #3c2120;
    --focus: #8bb7ee;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .35);
    --scrim: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131416; --surface: #1b1d20; --surface-2: #23262a; --surface-3: #2d3035;
  --ink: #edebe7; --ink-2: #b9bdc3; --ink-3: #8f949b;
  --line: #2b2e33; --line-strong: #3d4248;
  --accent: #e8825f; --accent-hover: #f09a7b; --accent-ink: #1d0f09; --accent-soft: #3a2219; --accent-text: #f0997a;
  --ok: #79c899; --ok-soft: #1c3226; --warn: #e5bb5c; --warn-soft: #362d1b;
  --info: #8bb7ee; --info-soft: #1c2a3b; --bad: #f2948d; --bad-soft: #3c2120;
  --focus: #8bb7ee;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .35);
  --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* "Larger text" (Settings → Appearance): every size is in rem, so the whole UI scales. */
:root[data-text="large"] { font-size: 112.5%; }