/* Jobbo design tokens — the single source of truth for colour, type, space, depth and motion.
   Direction (2026-09-16, owner): clean and modern on the owner's base palette —
   sea #218DAE (the one action colour), cyan #2BBBD7 (live: focus, "Ny", hover edges),
   yellow #FFD758 (warm signature: salary, Sparad, today's marker) and pale yellow #FCE59A
   (soft highlight backgrounds). Neutrals are sea-tinted, not slate. Character comes from
   two signatures, not from colour spread: the employer monogram tile and the fit triplet.

   Consumers: web/ui.css (components), web/styles.css (dashboard), web/cv.css, web/brev.css,
   web/styleguide.html (the living reference). Change values here, never in consumers. */

:root {
  /* ---- Base palette (owner) ------------------------------------------------------ */
  --sea: #218dae;
  --cyan: #2bbbd7;
  --sun: #ffd758;
  --sun-pale: #fce59a;

  /* ---- Canvas and surfaces: one temperature, lightness only ---------------------- */
  --canvas: #ffffff;            /* the page */
  --canvas-tint: #f5f8f9;       /* list backgrounds, side areas, table headers */
  --card: #ffffff;              /* cards sit on the canvas with a hairline, not a shadow */
  --raised: #ffffff;            /* popovers, menus, dialogs (get the one shadow) */
  --sunken: #eef3f5;            /* inputs are inset: slightly darker than around them */
  --selected: #e9f6fa;          /* selected row / active chip: cyan wash */
  --hover: #f4f8f9;             /* row hover */

  /* ---- Ink: four levels, always use all four ------------------------------------ */
  --ink: #0b1f2a;               /* primary text: deep sea ink */
  --ink-2: #2f4650;             /* secondary text, body in cards */
  --ink-3: #5e7480;             /* metadata, labels */
  --ink-4: #94a7b0;             /* placeholders, disabled */
  --ink-inverse: #ffffff;

  /* ---- Lines: low-alpha so they blend ------------------------------------------- */
  --line-soft: rgba(11, 31, 42, 0.06);
  --line: rgba(11, 31, 42, 0.10);
  --line-strong: rgba(11, 31, 42, 0.18);
  --focus: var(--cyan);
  /* Solid, not a 35 % wash: the old rgba(43,187,215,.35) composited to 1.34:1 on the light
     page and 2.04:1 on the dark one, under the 3:1 WCAG asks of a focus indicator (SC 1.4.11),
     and :focus-visible turns the browser's own outline off. var(--accent) already flips per
     theme, so one value passes both: 4.59:1 on white, 6.29:1 on the dark canvas. */
  --focus-ring: 0 0 0 3px var(--accent);

  /* ---- The one action colour ------------------------------------------------------ */
  --accent: #1e7f9d;            /* sea, one step darker so white text passes AA (4.6:1) */
  --accent-hover: #1a6f8a;
  --accent-active: #155c72;
  --accent-soft: #e6f4f8;       /* tinted backgrounds behind accent text */
  --accent-ink: #176b86;        /* accent as text on white (AA) */
  --on-accent: #ffffff;

  /* ---- Live and warm: used sparingly, never as body text ------------------------- */
  --live: var(--cyan);          /* focus, "Ny", hover edges, progress */
  --live-soft: #e9f6fa;
  --sun-soft: #fff4c7;          /* pale yellow washes (from #fce59a) */
  --sun-ink: #6b4f00;           /* text on yellow washes */

  /* ---- Semantics: inside the palette --------------------------------------------- */
  --ok: #157a4f;        --ok-soft: #e8f6ef;
  --warn: #8a5e00;      --warn-soft: var(--sun-soft);
  --danger: #c0392f;    --danger-soft: #fdeceb;
  --info: #526a77;      --info-soft: #eef3f5;

  /* ---- Jobbo vocabulary ---------------------------------------------------------- */
  --fit-pass: var(--ok);           /* Passar */
  --fit-missing: var(--warn);      /* Saknas — a gap, not an error */
  --fit-unclear: var(--ink-3);     /* Oklart */
  --deadline-soon: var(--warn);    /* ≤ 14 days */
  --deadline-urgent: var(--danger);/* ≤ 5 days */
  --fresh: var(--live);            /* "Ny" */
  --saved: #8f6600;                /* Sparad: dark gold — 4.67:1 on --sun-soft #fff4c7, 5.16:1 on white */
  --applied: var(--accent);        /* Sökt */
  --salary-bg: var(--sun-soft);    /* the salary badge wash */
  --salary-ink: var(--sun-ink);
  --source-platsbanken: #218dae;
  --source-teamtailor: #0f9d7a;
  --source-smartrecruiters: #1c7ed6;
  --source-workday: #d97706;
  --source-ashby: #db2777;
  --source-greenhouse: #16a34a;
  --source-lever: #ea580c;
  --source-joblinks: #7c3aed;

  /* ---- Type: Inter for everything, Schibsted Grotesk for titles only -------------- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Schibsted Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 11px;   --lh-xs: 16px;
  --text-sm: 13px;   --lh-sm: 18px;
  --text-md: 14px;   --lh-md: 20px;     /* body */
  --text-lg: 17px;   --lh-lg: 24px;     /* card titles */
  --text-xl: 22px;   --lh-xl: 28px;     /* panel titles */
  --text-2xl: 28px;  --lh-2xl: 34px;    /* page titles */
  --tracking-tight: -0.02em;
  --tracking-caps: 0.06em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --tabular: "tnum" 1, "cv11" 1;        /* numbers align in tables and dates */

  /* ---- Space: 4 px base ---------------------------------------------------------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---- Shape -------------------------------------------------------------------- */
  --r-2xs: 2px;   /* text-level affordances and the drawn option miniatures */
  --r-xs: 4px;    /* inner surfaces: segmented buttons, marks, small badges */
  --r-sm: 8px;    /* inputs, buttons, chips */
  --r-md: 12px;   /* cards, tiles */
  --r-lg: 16px;   /* dialogs, sheets */
  --r-pill: 999px;

  /* ---- Buttons: a short vertical gradient, a lit top edge and a grounded shadow ---
     The primary runs from --accent down to a darker sea, so white text keeps AA over the
     whole face. Dark mode DOES need its own set: --accent lightens to #3aa6c6 there, and
     white on that is 2.82:1. The dark block below rebuilds the face from a darker mix. */
  --btn-face: linear-gradient(180deg, var(--card) 0%, color-mix(in srgb, var(--card) 94%, var(--ink)) 100%);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(11, 31, 42, 0.07);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(11, 31, 42, 0.10);
  --btn-primary-face: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 82%, #03202b) 100%);
  --btn-primary-face-hover: linear-gradient(180deg, color-mix(in srgb, var(--accent) 94%, #fff) 0%, color-mix(in srgb, var(--accent) 86%, #03202b) 100%);
  --btn-primary-edge: color-mix(in srgb, var(--accent) 74%, #03202b);
  --btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(11, 31, 42, 0.22), 0 3px 10px -3px color-mix(in srgb, var(--accent) 70%, transparent);
  --btn-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 2px 4px rgba(11, 31, 42, 0.22), 0 8px 18px -6px color-mix(in srgb, var(--accent) 80%, transparent);

  /* ---- Depth: hairlines for layout, one shadow for floating layers only --------- */
  --shadow-float: 0 8px 24px rgba(11, 31, 42, 0.10), 0 1px 2px rgba(11, 31, 42, 0.06);
  --shadow-dialog: 0 24px 64px rgba(11, 31, 42, 0.18), 0 2px 6px rgba(11, 31, 42, 0.08);
  --scrim: rgba(11, 31, 42, 0.32);      /* behind dialogs and sheets */

  /* ---- Layout ------------------------------------------------------------------- */
  --content-max: 1280px;
  --gutter: var(--s-6);
  --topbar-h: 56px;                    /* the app's phone top bar and the CV/Brev bars */
  --side-w: 240px;                     /* the app's left navigation (UX-PLAN §9) */
  --side-rail-w: 64px;                 /* the same nav as an icon rail on tablets */
  /* The job list column beside the reading pane. Fluid, the way /jobb/'s list is: on a
     wide screen a fixed 440 left the ad the whole rest of the page and every title two
     lines. 32vw against the site's 36vw, because the app's navigation takes its width
     off the top first. */
  --list-w: clamp(440px, 32vw, 640px);
  --sheet-w: 420px;                    /* slide-over pane / filter sheet on narrow screens */
  --tile: 44px;                         /* monogram tile in lists */
  --tile-lg: 56px;                      /* monogram tile in the reading pane */

  /* ---- Paper: the A4 canvas is printed matter, so it never follows dark mode --- */
  --paper: #ffffff;             /* the sheet itself */
  --paper-tint: #f1f1ed;        /* placeholder blocks drawn on the sheet */
  --paper-line: #c9c9c2;        /* dashed edit affordances on the sheet */

  /* ---- Motion ------------------------------------------------------------------- */
  --t-fast: 120ms; --t-base: 180ms; --t-slow: 260ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Z ------------------------------------------------------------------------ */
  --z-sticky: 10; --z-float: 40; --z-sheet: 50; --z-dialog: 60; --z-toast: 70;

  color-scheme: light;
}

/* Dark: same temperature, higher elevation = slightly lighter; borders carry structure. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0a1a22; --canvas-tint: #0e2029; --card: #10222c; --raised: #152a36; --sunken: #0a1a22;
    --selected: rgba(43, 187, 215, 0.14); --hover: rgba(255, 255, 255, 0.03);
    --ink: #e6edf0; --ink-2: #b7c6cd; --ink-3: #8398a3; --ink-4: #5b6f79; --ink-inverse: #0a1a22;
    --line-soft: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18);
    --accent: #3aa6c6; --accent-hover: #5bbbd6; --accent-active: #2b8fae; --accent-soft: rgba(58, 166, 198, 0.16); --accent-ink: #8fd3e6;
    /* White on the light-mode face is 4.59:1; on #3aa6c6 it is 2.82:1. The dark face is
       mixed down until white passes AA across the whole gradient: 5.02:1 at the top and
       6.27:1 at the bottom at rest, 4.63:1 / 5.77:1 on hover, which stays the lighter of
       the two. --accent itself is untouched, so links and the focus ring keep their colour. */
    --btn-primary-face: linear-gradient(180deg, color-mix(in srgb, var(--accent) 66%, #03202b) 0%, color-mix(in srgb, var(--accent) 54%, #03202b) 100%);
    --btn-primary-face-hover: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #03202b) 0%, color-mix(in srgb, var(--accent) 58%, #03202b) 100%);
    --btn-primary-edge: color-mix(in srgb, var(--accent) 48%, #03202b);
    --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.35); --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.45);
    --live-soft: rgba(43, 187, 215, 0.14); --sun-soft: rgba(255, 215, 88, 0.16); --sun-ink: #ffe38a;
    --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.12);
    --warn: #ffd758; --warn-soft: rgba(255, 215, 88, 0.14);
    --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12);
    --info: #a5b4c8; --info-soft: rgba(165, 180, 200, 0.10);
    --saved: #ffd758;
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0a1a22; --canvas-tint: #0e2029; --card: #10222c; --raised: #152a36; --sunken: #0a1a22;
  --selected: rgba(43, 187, 215, 0.14); --hover: rgba(255, 255, 255, 0.03);
  --ink: #e6edf0; --ink-2: #b7c6cd; --ink-3: #8398a3; --ink-4: #5b6f79; --ink-inverse: #0a1a22;
  --line-soft: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #3aa6c6; --accent-hover: #5bbbd6; --accent-active: #2b8fae; --accent-soft: rgba(58, 166, 198, 0.16); --accent-ink: #8fd3e6;
    /* White on the light-mode face is 4.59:1; on #3aa6c6 it is 2.82:1. The dark face is
       mixed down until white passes AA across the whole gradient: 5.02:1 at the top and
       6.27:1 at the bottom at rest, 4.63:1 / 5.77:1 on hover, which stays the lighter of
       the two. --accent itself is untouched, so links and the focus ring keep their colour. */
    --btn-primary-face: linear-gradient(180deg, color-mix(in srgb, var(--accent) 66%, #03202b) 0%, color-mix(in srgb, var(--accent) 54%, #03202b) 100%);
    --btn-primary-face-hover: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #03202b) 0%, color-mix(in srgb, var(--accent) 58%, #03202b) 100%);
    --btn-primary-edge: color-mix(in srgb, var(--accent) 48%, #03202b);
    --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.35); --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.45);
  --live-soft: rgba(43, 187, 215, 0.14); --sun-soft: rgba(255, 215, 88, 0.16); --sun-ink: #ffe38a;
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, 0.12);
  --warn: #ffd758; --warn-soft: rgba(255, 215, 88, 0.14);
  --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12);
  --info: #a5b4c8; --info-soft: rgba(165, 180, 200, 0.10);
  --saved: #ffd758;
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}