/* Linenglass design tokens: the one file a client brand replaces.
   Every colour (light and dark), size, space, radius, font, type size, line height, shadow,
   layer, duration and easing the interface uses is defined here and nowhere else. styles.css
   and the library components only read them with var(); the design lint (linenglass lint)
   fails on a raw colour or length anywhere outside this file. To rebrand, edit the values
   below: the accent set (--sky*, --i*, --link*, --focus), the fonts, the radii and the neutral ramp are the usual
   ones. Media queries cannot read custom properties, so the two breakpoints (768px phone,
   1024px panel) are written in the @media preludes of styles.css, which the lint exempts. */

/* ---------- the brand face ---------- */
/* Schibsted Grotesk, SIL OFL 1.1 (fonts/SchibstedGrotesk-LICENSE.txt): one variable Latin subset, weights 400 to 650,
   built by site/tools/font.sh. font-display swap draws text at once in the system face and swaps when it arrives.
   JetBrains Mono, SIL OFL 1.1 (fonts/JetBrainsMono-LICENSE.txt), is the mono face for commands, times and code: the same
   weight range as a variable Latin subset, also built by font.sh. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 650;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 650;
  font-style: normal;
  font-display: swap;
}

/* ---------- light theme (the default) ---------- */

:root {
  color-scheme: light;

  /* type: families, the size scale (13, 15, 17, 20, 28; nothing under 13), weights, line heights */
  --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-2: 13px;
  --fs-3: 15px;
  --fs-4: 17px;
  --fs-5: 20px;
  --fs-6: 28px;
  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* space, a 4 px scale */
  --s0: 2px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;

  /* shape: radii, hairline and focus ring, icon stroke. The larger radius is --r-card, not --r-2: --r-2 is the
     red tone's text-safe shade below, and one name cannot hold both. */
  --r-1: 6px;
  --r-card: 8px;
  --r-pill: 999px;
  --hair: 1px;
  --ring: 2px;
  --ring-gap: 2px;
  --mask-on: #000;
  --stroke: 1.5;

  /* component sizes: icons, dots, controls, bars, panels, columns, tiles, labelled widths */
  --icon: 16px;
  --icon-sm: 12px;
  --icon-lg: 20px;
  --icon-xl: 32px;
  --dot: 8px;
  --dot-sm: 6px;
  --ctl-h: 32px;
  --ctl-h-sm: 24px;
  --tap: 44px;
  --chip-h: 22px;
  --avatar: 20px;
  --bar-h: 4px;
  --top-h: 52px;
  --peek-w: 480px;
  --drawer-w: 400px;
  --col-min: 250px;
  --col-floor: 200px;
  --card-intrinsic-h: 7.5rem;
  --col-tight: 160px;
  --rail-w: 44px;
  --switch-min: 88px;
  --lw-tl-time: 112px;
  --tip-w: 280px;
  --tip-delay: 500ms;
  --tip-warm: 300ms;
  --tip-press: 500ms;
  --doc-pad: 32px;
  --label-w: 150px;
  --menu-w: 560px;
  --dialog-wide: 760px;
  --spin-size: 14px;
  --skel-row-h: 36px;
  --menu-h: 400px;
  --tile-min: 148px;
  --tile-icon: 28px;
  --tile-narrow: 68px;
  --board-tile-min: 288px;
  --search-w: 220px;
  --pop-w: 320px;
  --sheet-gap: 32px;
  --grab-w: 36px;
  --grab-h: 4px;
  --toast-w: 420px;
  --kbd-min: 20px;
  --lw-col: 152px;
  --lw-people: 72px;
  --lw-due: 104px;
  --lw-progress: 112px;
  --lw-ago: 56px;
  --viewer-h: 360px;
  --op-kind-w: 72px;
  --fig-ring: 88px;
  --fig-ring-sm: 72px;
  --fig-ring-lg: 128px;
  --spark-w: 96px;
  --spark-h: 28px;
  --chart-h: 200px;
  --body-max: 240px;
  --peek-body-max: 50dvh;
  --fade-w: 32px;
  --notes-min: 72px;
  --table-cell-min: 112px;

  /* driver sizes: the dot with its initial, the overlap of a stacked row of dots, the columns of the drivers screen */
  --drv: 20px;
  --drv-lg: 32px;
  --drv-overlap: -6px;
  --drv-col: 200px;
  --drv-col-wide: 240px;
  --drv-panel-w: 400px;

  /* gallery sizes */
  --gal-tile-min: 176px;
  --gal-ratio: 4 / 3;
  --gal-row-thumb: 56px;
  --gal-side-w: 240px;
  --gal-strip-thumb: 64px;
  --gal-strip-rows: 2;
  --gal-pick: 28px;
  --gal-gutter: 20px;
  --gal-title-min: 200px;

  /* layers */
  --z-sticky: 2;
  --z-float: 20;
  --z-panel: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-cursor: 12;

  /* motion: durations, easings, the poses an element animates from, opacities */
  --dur-fast: 120ms;
  --dur-card: 220ms;
  --dur-glide: 320ms;
  --dur-pulse: 1600ms;
  --dur-chip: 3000ms;
  --dur-loop: 2400ms;
  --dur-spin: 800ms;
  --dur-cursor: 400ms;
  --dur-cursor-fade: 600ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --scale-drop: 0.96;
  --scale-pop: 0.8;
  --slide: 24px;
  --o-dim: 0.45;
  --o-ghost: 0.7;
  --o-hidden: 0;
  --o-loop: 0.4;

  /* colour: neutral ramp (surfaces, hairlines, ink) */
  --bg: #ffffff;
  --bg-2: #fafafa;
  --bg-3: #f3f3f1;
  --line: #e8e8e6;
  --line-2: #d6d6d2;
  --ink: #111111;
  --ink-2: #555555;
  --ink-3: #6a6a66;

  /* colour: accent (the brand colour), then the four tones. Each tone has a strong
     colour, a text-safe shade (-2), a tint for fills (-t) and the colour to draw on it (-on). */
  --sky: #111111;
  --sky-2: #111111;
  --sky-tint: #ececea;
  --sky-on: #ffffff;
  --i: #4a5a70;
  --i-2: #3c4a5e;
  --i-t: #eef1f5;
  --i-on: #ffffff;
  --g: #1f9d55;
  --g-2: #157a41;
  --g-t: #e7f6ed;
  --g-on: #ffffff;
  --a: #d98a0b;
  --a-2: #8f5a00;
  --a-t: #fdf2dc;
  --a-on: #2a1a00;
  --r: #d83b3b;
  --r-2: #b02525;
  --r-t: #fdecec;
  --r-on: #ffffff;
  --v: #7c4ddb;
  --v-2: #5b33b8;
  --v-t: #f1ebfd;
  --v-on: #ffffff;
  --n-on: #ffffff;

  /* colour: overlays (scrim behind panels, the toast) */
  --scrim: rgba(17, 17, 17, 0.32);
  --toast-bg: #111111;
  --toast-ink: #ffffff;
  --toast-line: #111111;

  /* colour: eight fixed milestone colours, each at least 3:1 against every surface in its theme */
  --ms-1: #2563eb;
  --ms-2: #7c3aed;
  --ms-3: #a21caf;
  --ms-4: #be185d;
  --ms-5: #c2410c;
  --ms-6: #a16207;
  --ms-7: #15803d;
  --ms-8: #0e7490;

  /* colour: eight driver colours, muted and carrying an initial so they never read as milestone dots;
     each is at least 5:1 against every surface in its theme, and --dr-on is the initial drawn on it */
  --dr-1: #3d5a9c;
  --dr-2: #8a5240;
  --dr-3: #5f6f14;
  --dr-4: #86407f;
  --dr-5: #356e72;
  --dr-6: #96475c;
  --dr-7: #6f6250;
  --dr-8: #566485;
  --dr-on: #ffffff;
  
  /* colour: four personal tints a person may give a card (CARDS-CUSTOM.md). Each keeps --ink to --ink-3 at 4.5:1,
     sits 35 degrees of hue or more from --r, --a and --g, and is told apart from the card, hover, selected and state tints */
  --tint-sky: #d7f0ff;
  --tint-teal: #cbf7f6;
  --tint-lilac: #eee8ff;
  --tint-rose: #ffe3f8;

  /* colour: eight tints for agent cursors, one per driver by a stable hash of its id (src/cursors.js). Each holds 3:1
     against every surface it can sit on, in this theme, and the eight are told apart by hue. */
  --cursor-1: #e04d61;
  --cursor-2: #cc6724;
  --cursor-3: #987f1b;
  --cursor-4: #1a9347;
  --cursor-5: #198f87;
  --cursor-6: #2685d9;
  --cursor-7: #6e52e0;
  --cursor-8: #db33db;
  --cursor-size: 18px;

  /* colour: the roles components read for a surface. Light keeps each element's value from the --bg ramp; dark
     points each role at a step of its surface ladder (brand/DARK.md). --ov-* are the roles inside an overlay. */
  --surface-page: var(--bg);
  --surface-chrome: var(--bg);
  --surface-chrome-2: var(--bg-2);
  --surface-well: var(--bg-2);
  --surface-well-2: var(--bg);
  --surface-card: var(--bg);
  --surface-card-2: var(--bg-2);
  --surface-field: var(--bg);
  --surface-control: var(--bg);
  --surface-overlay: var(--bg);
  --surface-hover: var(--bg-3);
  --surface-hover-row: var(--bg-2);
  --surface-selected: var(--bg-3);
  --surface-fill: var(--bg-3);
  --surface-track: var(--bg-3);
  --ov-control: var(--bg);
  --ov-hover: var(--bg-3);
  --ov-hover-row: var(--bg-2);
  --ov-selected: var(--bg-3);
  --surface-thumb: var(--bg);
  --ov-well: var(--bg-2);
  --ov-field: var(--bg);
  --ov-card-2: var(--bg-2);
  --line-float: var(--line);
  --card-hover: var(--sky-tint);
  --card-hover-line: var(--sky);
  --line-ov: var(--line);
  --line-2-ov: var(--line-2);
  --line-field: var(--line);
  --ink-4: var(--ink-3);

  /* colour: links and focus. The accent is ink, so a link is told from running text by its underline and the focus
     ring is drawn in ink; a surface that is ink itself sets --focus to its own on-colour. */
  --link: var(--ink);
  --link-line: var(--ink-3);
  --link-thick: var(--hair);
  --link-thick-hover: var(--ring);
  --link-offset: 0.18em;
  --focus: var(--ink);

  /* colour: selection and scrollbars */
  --selection-bg: #dcdcd8;
  --scroll-thumb: var(--line-2);
  --scroll-thumb-hover: var(--ink-3);

  /* knockout rings take the colour of the surface under them; each surface that hosts one sets --here */
  --here: var(--surface-page);

  /* shadow */
  --shadow-float: 0 12px 40px rgba(17, 17, 17, 0.14), 0 2px 8px rgba(17, 17, 17, 0.06);
}

/* ---------- dark theme: chosen by the reader ----------
   brand/DARK.md specifies every value below and core/test/dark.test.js checks it. */

[data-theme="dark"] {
  color-scheme: dark;

  /* the surface ladder: one hue (265), each step about 0.03 lighter in OKLCH than the one below */
  --l-well: #090b0f;
  --l-page: #101216;
  --l-chrome: #15181c;
  --l-raised: #1b1e23;
  --l-overlay: #22252b;
  --l-hover: #2a2d34;
  --l-selected: #31343c;
  --l-top: #383c44;
  --bg: #101216;
  --bg-2: #15181c;
  --bg-3: #2a2d34;

  /* the roles components read */
  --surface-page: var(--l-page);
  --surface-chrome: var(--l-chrome);
  --surface-chrome-2: var(--l-chrome);
  --surface-well: var(--l-well);
  --surface-well-2: var(--l-well);
  --surface-card: var(--l-raised);
  --surface-card-2: var(--l-raised);
  --surface-field: var(--l-well);
  --surface-control: var(--l-raised);
  --surface-overlay: var(--l-overlay);
  --surface-hover: var(--l-hover);
  --surface-hover-row: var(--l-overlay);
  --surface-selected: var(--l-selected);
  --surface-fill: var(--l-hover);
  --surface-track: var(--l-well);
  --ov-control: var(--l-hover);
  --ov-hover: var(--l-selected);
  --ov-hover-row: var(--l-selected);
  --ov-selected: var(--l-top);
  --surface-thumb: var(--l-selected);
  --ov-well: var(--l-raised);
  --ov-field: var(--l-raised);
  --ov-card-2: var(--l-hover);
  --line-float: #4c5058;
  --card-hover: var(--l-hover);
  --card-hover-line: var(--line-2);

  /* borders, two strengths, lighter inside an overlay; a field's border */
  --line: #2b2e34;
  --line-2: #40444b;
  --line-ov: #363940;
  --line-2-ov: #4c5058;
  --line-field: #656970;

  /* text, four levels: --ink to --ink-3 reach 4.5:1 on every step; --ink-4 is for placeholders and reaches it on every surface a field can be */
  --ink: #eff0f3;
  --ink-2: #bec1c7;
  --ink-3: #a3a6ad;
  --ink-4: #8a8e95;

  /* accent (ink) and tones: the state tones are strong at OKLCH L 0.72, text at 0.82, tint at 0.30, on-colour at 0.18 */
  --sky: #eff0f3;
  --sky-2: #eff0f3;
  --sky-tint: #2e3139;
  --sky-on: #101216;
  --i: #9aa8bd;
  --i-2: #b7c2d3;
  --i-t: #252b35;
  --i-on: #101216;
  --g: #4dbf74;
  --g-2: #92d7a4;
  --g-t: #163620;
  --g-on: #07150b;
  --a: #d79628;
  --a-2: #eabb79;
  --a-t: #3c2a0e;
  --a-on: #190f03;
  --r: #f47b74;
  --r-2: #ffaba3;
  --r-t: #462220;
  --r-on: #1d0c0b;
  --v: #ac8ff8;
  --v-2: #c8b7ff;
  --v-t: #302846;
  --v-on: #130f1d;
  --n-on: #101216;

  /* selection, scrollbars, scrim, toast */
  --selection-bg: #393c45;
  --scroll-thumb: #44484f;
  --scroll-thumb-hover: #5a5e65;
  --scrim: rgba(4, 5, 8, 0.6);
  --toast-bg: var(--l-top);
  --toast-ink: #eff0f3;
  --toast-line: #4c5058;
  --ms-1: #6ea8fe;
  --ms-2: #a78bfa;
  --ms-3: #e879f9;
  --ms-4: #f472b6;
  --ms-5: #fb923c;
  --ms-6: #eab308;
  --ms-7: #4ade80;
  --ms-8: #22d3ee;
  --dr-1: #97b0e8;
  --dr-2: #e0a288;
  --dr-3: #b4c85a;
  --dr-4: #d79dd0;
  --dr-5: #6fc0c0;
  --dr-6: #e69bac;
  --dr-7: #cdbf95;
  --dr-8: #a9b6d6;
  --dr-on: #101216;
  
  /* colour: four personal tints a person may give a card (CARDS-CUSTOM.md). Each keeps --ink to --ink-3 at 4.5:1,
     sits 35 degrees of hue or more from --r, --a and --g, and is told apart from the card, hover, selected and state tints */
  --tint-sky: #193348;
  --tint-teal: #05383a;
  --tint-lilac: #322b47;
  --tint-rose: #40263a;

  /* the cursor tints, lifted to hold 3:1 on the dark surfaces */
  --cursor-1: #ee6375;
  --cursor-2: #ee9a63;
  --cursor-3: #eed263;
  --cursor-4: #63ee96;
  --cursor-5: #63eee4;
  --cursor-6: #63adee;
  --cursor-7: #9a85f4;
  --cursor-8: #ee63ee;

  /* no float shadow: elevation is the surface step and its border */
  --shadow-float: none;
}

/* ---------- dark theme: the system setting, unless the reader chose light ----------
   The same values as [data-theme="dark"]; plain CSS has no way to share one block between
   an attribute selector and a media query. Change both together. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* the surface ladder: one hue (265), each step about 0.03 lighter in OKLCH than the one below */
    --l-well: #090b0f;
    --l-page: #101216;
    --l-chrome: #15181c;
    --l-raised: #1b1e23;
    --l-overlay: #22252b;
    --l-hover: #2a2d34;
    --l-selected: #31343c;
    --l-top: #383c44;
    --bg: #101216;
    --bg-2: #15181c;
    --bg-3: #2a2d34;

    /* the roles components read */
    --surface-page: var(--l-page);
    --surface-chrome: var(--l-chrome);
    --surface-chrome-2: var(--l-chrome);
    --surface-well: var(--l-well);
    --surface-well-2: var(--l-well);
    --surface-card: var(--l-raised);
    --surface-card-2: var(--l-raised);
    --surface-field: var(--l-well);
    --surface-control: var(--l-raised);
    --surface-overlay: var(--l-overlay);
    --surface-hover: var(--l-hover);
    --surface-hover-row: var(--l-overlay);
    --surface-selected: var(--l-selected);
    --surface-fill: var(--l-hover);
    --surface-track: var(--l-well);
    --ov-control: var(--l-hover);
    --ov-hover: var(--l-selected);
    --ov-hover-row: var(--l-selected);
    --ov-selected: var(--l-top);
    --surface-thumb: var(--l-selected);
    --ov-well: var(--l-raised);
    --ov-field: var(--l-raised);
    --ov-card-2: var(--l-hover);
    --line-float: #4c5058;
    --card-hover: var(--l-hover);
    --card-hover-line: var(--line-2);

    /* borders, two strengths, lighter inside an overlay; a field's border */
    --line: #2b2e34;
    --line-2: #40444b;
    --line-ov: #363940;
    --line-2-ov: #4c5058;
    --line-field: #656970;

    /* text, four levels: --ink to --ink-3 reach 4.5:1 on every step; --ink-4 is for placeholders and reaches it on every surface a field can be */
    --ink: #eff0f3;
    --ink-2: #bec1c7;
    --ink-3: #a3a6ad;
    --ink-4: #8a8e95;

    /* accent (ink) and tones: the state tones are strong at OKLCH L 0.72, text at 0.82, tint at 0.30, on-colour at 0.18 */
    --sky: #eff0f3;
    --sky-2: #eff0f3;
    --sky-tint: #2e3139;
    --sky-on: #101216;
    --i: #9aa8bd;
    --i-2: #b7c2d3;
    --i-t: #252b35;
    --i-on: #101216;
    --g: #4dbf74;
    --g-2: #92d7a4;
    --g-t: #163620;
    --g-on: #07150b;
    --a: #d79628;
    --a-2: #eabb79;
    --a-t: #3c2a0e;
    --a-on: #190f03;
    --r: #f47b74;
    --r-2: #ffaba3;
    --r-t: #462220;
    --r-on: #1d0c0b;
    --v: #ac8ff8;
    --v-2: #c8b7ff;
    --v-t: #302846;
    --v-on: #130f1d;
    --n-on: #101216;

    /* selection, scrollbars, scrim, toast */
    --selection-bg: #393c45;
    --scroll-thumb: #44484f;
    --scroll-thumb-hover: #5a5e65;
    --scrim: rgba(4, 5, 8, 0.6);
    --toast-bg: var(--l-top);
    --toast-ink: #eff0f3;
    --toast-line: #4c5058;
    --ms-1: #6ea8fe;
    --ms-2: #a78bfa;
    --ms-3: #e879f9;
    --ms-4: #f472b6;
    --ms-5: #fb923c;
    --ms-6: #eab308;
    --ms-7: #4ade80;
    --ms-8: #22d3ee;
    --dr-1: #97b0e8;
    --dr-2: #e0a288;
    --dr-3: #b4c85a;
    --dr-4: #d79dd0;
    --dr-5: #6fc0c0;
    --dr-6: #e69bac;
    --dr-7: #cdbf95;
    --dr-8: #a9b6d6;
    --dr-on: #101216;
    
    /* colour: four personal tints a person may give a card (CARDS-CUSTOM.md). Each keeps --ink to --ink-3 at 4.5:1,
       sits 35 degrees of hue or more from --r, --a and --g, and is told apart from the card, hover, selected and state tints */
    --tint-sky: #193348;
    --tint-teal: #05383a;
    --tint-lilac: #322b47;
    --tint-rose: #40263a;

    /* the cursor tints, lifted to hold 3:1 on the dark surfaces */
    --cursor-1: #ee6375;
    --cursor-2: #ee9a63;
    --cursor-3: #eed263;
    --cursor-4: #63ee96;
    --cursor-5: #63eee4;
    --cursor-6: #63adee;
    --cursor-7: #9a85f4;
    --cursor-8: #ee63ee;

    /* no float shadow: elevation is the surface step and its border */
    --shadow-float: none;
  }
}

/* ---------- phone overrides ---------- */

@media (max-width: 767px) {
  :root { --gal-tile-min: 140px; }
}