/*
 * Shelf sandbox kit – design tokens. The ONLY place where colours and font families are defined.
 *
 * Synced from study-platform-en/src/app/globals.css on 2026-10-16
 * (core `:root` / `.dark`, the visor layer, the six platform looks, the radius scale of `@theme`).
 * The generated region below is rewritten by `npm run tokens:sync`; `npm run tokens:check` tells
 * whether the kit is behind the platform. Everything after `@sync:end` is the kit's own and is
 * written by hand – it may reference platform tokens, never repeat their numbers.
 *
 * Light = "Dusk": warm paper and lamp light. Dark = "Night": night blue and brass – Shelf's night
 * control room. The redesign of 16.10.2026 (study-platform-en/docs/en/design/handoff).
 */

/* Fonts: self-hosted variable woff2 copied from the platform (src/app/fonts), SIL OFL 1.1. */
@font-face {
  font-family: "Figtree";
  src: url("./fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Young Serif";
  src: url("./fonts/young-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* @sync:begin – generated by scripts/sync-tokens.mjs, do not edit by hand */
:root {
  color-scheme: light;
  --surface: #f1e7dc;
  --raised: #fbf5ee;
  --sunken: #e9dccd;
  --line: rgb(20 26 60 / 0.14);
  --line-strong: rgb(20 26 60 / 0.3);
  --field: #6d6880;
  --ink: #141a33;
  --ink-2: #3b3f5c;
  --ink-3: #5a5670;
  --accent: #7a4e08;
  --accent-hover: #633f05;
  --on-accent: #fff6e2;
  --ok: #146a41;
  --on-ok: #fff6e2;
  --warn: #8a4f00;
  --on-warn: #fff6e2;
  --danger: #a8231c;
  --on-danger: #fff6e2;
  --rating: #8a4f00;
  --violet: #2b3566;
  --violet-hover: #1f2850;
  --on-violet: #f3ecdc;
  --gold-soft: #f3e2c0;
  --vault: #f7efe5;
  --shadow-card: 0 0 0 1px rgb(20 26 60 / 0.08);
  --edge: rgb(122 78 8 / 0.55);
  --plate: linear-gradient(180deg, #fbf5ee, #fbf5ee);
  --label: #7a4e08;
  --top: #0e1630;
  --top-ink: #f3ecdc;
  --top-ink-2: #a3a6bd;
  --top-gold: #e6b450;
  --tint-forge: #e6ccc1;
  --tint-forge-ink: #604539;
  --tint-grove: #c1e6cc;
  --tint-grove-ink: #396045;
  --tint-tide: #c1d9e6;
  --tint-tide-ink: #395260;
  --tint-dusk: #dbc1e6;
  --tint-dusk-ink: #543960;
  --tint-amber: #e6ddc1;
  --tint-amber-ink: #605639;
  --tint-rose: #e6c1d2;
  --tint-rose-ink: #60394b;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-card: 1.125rem;
}

/* Dark: the platform's night palette. Explicit choice wins; otherwise follow the system. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0e1630;
  --raised: #17213f;
  --sunken: #0a1126;
  --line: rgb(150 170 230 / 0.16);
  --line-strong: rgb(150 170 230 / 0.34);
  --field: #7a86ad;
  --ink: #f3ecdc;
  --ink-2: #c9c6d3;
  --ink-3: #a3a6bd;
  --accent: #e6b450;
  --accent-hover: #f0c66a;
  --on-accent: #231703;
  --ok: #62d98b;
  --on-ok: #231703;
  --warn: #f3a64a;
  --on-warn: #231703;
  --danger: #ff7d70;
  --on-danger: #231703;
  --rating: #f3a64a;
  --violet: #aab6ea;
  --violet-hover: #c0caf2;
  --on-violet: #0e1630;
  --gold-soft: #343641;
  --vault: #0c1329;
  --shadow-card: 0 0 0 1px rgb(150 170 230 / 0.12);
  --edge: rgb(230 180 80 / 0.5);
  --plate: linear-gradient(180deg, #17213f, #17213f);
  --label: #d8c08a;
  --tint-forge: #412d25;
  --tint-forge-ink: #d2c2bc;
  --tint-grove: #25412d;
  --tint-grove-ink: #bcd2c2;
  --tint-tide: #253741;
  --tint-tide-ink: #bccad2;
  --tint-dusk: #392541;
  --tint-dusk-ink: #cbbcd2;
  --tint-amber: #413a25;
  --tint-amber-ink: #d2cdbc;
  --tint-rose: #412532;
  --tint-rose-ink: #d2bcc6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0e1630;
    --raised: #17213f;
    --sunken: #0a1126;
    --line: rgb(150 170 230 / 0.16);
    --line-strong: rgb(150 170 230 / 0.34);
    --field: #7a86ad;
    --ink: #f3ecdc;
    --ink-2: #c9c6d3;
    --ink-3: #a3a6bd;
    --accent: #e6b450;
    --accent-hover: #f0c66a;
    --on-accent: #231703;
    --ok: #62d98b;
    --on-ok: #231703;
    --warn: #f3a64a;
    --on-warn: #231703;
    --danger: #ff7d70;
    --on-danger: #231703;
    --rating: #f3a64a;
    --violet: #aab6ea;
    --violet-hover: #c0caf2;
    --on-violet: #0e1630;
    --gold-soft: #343641;
    --vault: #0c1329;
    --shadow-card: 0 0 0 1px rgb(150 170 230 / 0.12);
    --edge: rgb(230 180 80 / 0.5);
    --plate: linear-gradient(180deg, #17213f, #17213f);
    --label: #d8c08a;
    --tint-forge: #412d25;
    --tint-forge-ink: #d2c2bc;
    --tint-grove: #25412d;
    --tint-grove-ink: #bcd2c2;
    --tint-tide: #253741;
    --tint-tide-ink: #bccad2;
    --tint-dusk: #392541;
    --tint-dusk-ink: #cbbcd2;
    --tint-amber: #413a25;
    --tint-amber-ink: #d2cdbc;
    --tint-rose: #412532;
    --tint-rose-ink: #d2bcc6;
  }
}
/* @sync:end */

/* ─────────────── The kit's own tokens (hand-written) ─────────────── */
:root {
  /* The cream the product illustrations are painted on (shop/public/img/products), the same in both
     themes: the picture is an object on paper, and the tile around it must match its edge. */
  --product-paper: #f4e4c7;

  /* Families – the same three as the platform: Figtree to read and tap, Young Serif for places and
     titles, JetBrains Mono for code and addresses. Labels are Figtree too (no letter-spaced caps). */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-label: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (rem). Body is 15px: dense like the platform's workspace, still readable on phones. */
  --text-2xs: 0.6875rem; /* label caps */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --tracking-label: 0.12em;

  /* Spacing: a 4px grid. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --gutter: clamp(1rem, 3vw, 2rem); /* page side inset; 16px on a 390px phone */

  /* Controls: soft corners on what you touch, cards a step rounder (platform decision 21.08.2026). */
  --radius-control: var(--radius-lg);
  --radius-pill: 999px;
  --control-h: 2.75rem; /* 44px – touch target */
  --control-h-sm: 2.25rem;

  /* Focus: a 2px accent ring with a surface gap, visible on any fill. */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Overlays and elevation. Tints are OPAQUE (mixed with the card colour, not with transparency):
     nothing may show through a plate that carries text – a "Free shipping" badge over a product
     picture was unreadable (Артём, 16.10.2026). The scrim under a dialog is the one see-through
     layer, and it carries no text. */
  --scrim: color-mix(in srgb, var(--top) 55%, transparent);
  --shadow-pop: 0 8px 28px color-mix(in srgb, var(--top) 28%, transparent);
  --tint-soft: color-mix(in srgb, var(--accent) 10%, var(--raised));
  --ok-soft: color-mix(in srgb, var(--ok) 13%, var(--raised));
  --warn-soft: color-mix(in srgb, var(--warn) 15%, var(--raised));
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--raised));
  --violet-soft: color-mix(in srgb, var(--violet) 13%, var(--raised));

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 140ms;

  /* Layout */
  --header-h: 3.5rem;
  --measure: 70ch;
  --z-header: 20;
  --z-toast: 60;
  --z-dialog: 50;
}

/*
 * Places at Shelf. Each course of the QA Engineer Path happens in its own place; a station or a
 * trainer page that belongs to one sets `data-place="<name>"` on <html> (or any container) and
 * gets a quiet accent for its place tag. The shop itself sets none.
 */
[data-place="control-room"],
[data-place="capstone"] { --place: var(--tint-dusk); --place-ink: var(--tint-dusk-ink); }
[data-place="release-board"],
[data-place="release-conveyor"] { --place: var(--tint-forge); --place-ink: var(--tint-forge-ink); }
[data-place="spec-studio"],
[data-place="bug-board"] { --place: var(--tint-rose); --place-ink: var(--tint-rose-ink); }
[data-place="storefront"],
[data-place="device-wall"] { --place: var(--tint-amber); --place-ink: var(--tint-amber-ink); }
[data-place="gateway"],
[data-place="signal-room"] { --place: var(--tint-tide); --place-ink: var(--tint-tide-ink); }
[data-place="data-vault"],
[data-place="engine-room"] { --place: var(--tint-grove); --place-ink: var(--tint-grove-ink); }

/*
 * Worlds. A sandbox that belongs to a story world (a "world pack" of the protocol sandboxes) sets
 * `data-world="<pack id>"` on <html>: the same two properties as a place, so the place tag, and
 * anything else that reads --place, takes the world's accent. A new world = one line here, using
 * an existing tint; never a new colour.
 */
[data-world="shelf"] { --place: var(--tint-tide); --place-ink: var(--tint-tide-ink); }
[data-world="demo-world"] { --place: var(--tint-grove); --place-ink: var(--tint-grove-ink); }
[data-world="slavic"] { --place: var(--tint-rose); --place-ink: var(--tint-rose-ink); }
[data-world="grpc-china"] { --place: var(--tint-grove); --place-ink: var(--tint-grove-ink); }
[data-world="scandinavia"] { --place: var(--tint-dusk); --place-ink: var(--tint-dusk-ink); }
[data-world="greece"] { --place: var(--tint-forge); --place-ink: var(--tint-forge-ink); }
[data-world="egypt"] { --place: var(--tint-amber); --place-ink: var(--tint-amber-ink); }