/* Design tokens of the Nods Office UI (NOD-154), taken from design/mockups/escapist.html round 5 and
   design/mockups/creator.html, with the fixes of docs/ui-mockup-qa.md built in. Shared by the office and the
   creator. Documented in docs/design-system.md. Load this file before any other stylesheet. */

/* Fonts are served by the office itself: its CSP (default-src 'self') blocks Google Fonts. OFL, licences in web/fonts. */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/pixelify-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/pixelify-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Light is the default. */
:root {
  color-scheme: light;

  /* colour: grounds and ink (the sprite outline is the ink) */
  --ink: #2a2036; --paper: #fffdf6; --cream: #f4f1ea; --bg: #f3eee3; --tint: #ece7dc; --field: #ffffff;
  --muted: #6b6478; --line: #e4ddcf; --paper-lo: #d8d2c4; --sel: #fff3c4;
  /* The map and the night behind it stay dark in both themes. */
  --map-ground: #241d2e; --scrim: rgba(20, 14, 30, .45); --backdrop: rgba(20, 14, 30, .5);

  /* colour: accents. --red is the fill of destructive buttons, white on it is 5.98:1 (QA M6, NOD-231). */
  --amber: #f2b33d; --red: #b23a17; --red-ink: #b23a17; --green-ink: #2c7a47;
  --green: #47a76a; --blue: #3e8ed0; --purple: #8c5fbf; --teal: #2fb5a8;
  /* Text on a fill: dark on amber, white on red. A team colour is never a text ground, only a swatch (QA M6). */
  --on-amber: #2a2036; --on-red: #ffffff;

  /* state pills: background and text per tone, every pair at least 4.5:1 */
  --p-grey-b: #ece7dc; --p-grey-f: #4a4458; --p-blue-b: #e3eefb; --p-blue-f: #1f5f9e;
  --p-green-b: #e1f2e6; --p-green-f: #2c7a47; --p-amber-b: #fdefcf; --p-amber-f: #7d5200;
  --p-red-b: #fde3dc; --p-red-f: #a8361a; --p-purple-b: #eee5fa; --p-purple-f: #6a3fa0;

  /* raw commands and config, always on a dark block */
  --code-bg: #14182b; --code: #9fe8db; --code-add: #a9e88a; --code-del: #ff9c86; --code-dim: #8d93ad;

  /* type: the pixel font only for headings, numbers always Space Grotesk (Pixelify draws 5 like S) */
  --pix: "Pixelify Sans", ui-monospace, monospace;
  --body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px; --text-s: 13px; --text-m: 14px; --text-body: 15px; --text-field: 16px;
  --text-h3: 16px; --text-h2: 19px; --text-h1: 24px; --leading: 1.45;

  /* spacing, radii, touch targets */
  --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 18px; --space-7: 24px;
  --radius-s: 4px; --radius: 6px; --radius-round: 12px;
  --frame: 8px; --tap: 44px; --tap-btn: 52px; --tap-big: 60px; --dock-h: 76px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);

  /* focus: one ring for every control, ink with a gap in the ground colour (QA M7, NOD-232) */
  --focus: #2a2036; --focus-gap: #fffdf6; --focus-w: 3px; --focus-offset: 2px;

  /* motion: zero under reduced motion (QA m2, NOD-238). The hold keeps its time, it is a timer, not decoration. */
  --dur-fast: .15s; --dur-sheet: .16s; --ease-pixel: steps(4); --hold-ms: .5s;
  --hold-fill: rgba(178, 58, 23, .32); --hold-fill-primary: rgba(42, 32, 54, .3);

  /* 9-slice pixel frames: 12x12 art sliced at 4, drawn at 2x (border: var(--frame) solid transparent) */
  --f-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%232a2036'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23fffdf6'/%3E%3Cpath d='M1 10h10v1H1z' fill='%23d8d2c4'/%3E%3C/svg%3E");
  --f-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%232a2036'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23f4f1ea'/%3E%3Cpath d='M1 1h10v2H1z' fill='%23ffffff'/%3E%3Cpath d='M1 9h10v2H1z' fill='%23c9c2b3'/%3E%3C/svg%3E");
  --f-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%232a2036'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23f2b33d'/%3E%3Cpath d='M1 1h10v2H1z' fill='%23ffd98a'/%3E%3Cpath d='M1 9h10v2H1z' fill='%23c98f1c'/%3E%3C/svg%3E");
  --f-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%232a2036'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23b23a17'/%3E%3Cpath d='M1 1h10v2H1z' fill='%23cf5530'/%3E%3Cpath d='M1 9h10v2H1z' fill='%237f2810'/%3E%3C/svg%3E");
  --f-sel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%232a2036'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23fff3c4'/%3E%3Cpath d='M1 1h10v2H1z' fill='%23fffbe6'/%3E%3Cpath d='M1 9h10v2H1z' fill='%23e2c56a'/%3E%3C/svg%3E");
}

/* Dark follows the system unless a page sets data-theme="light", data-theme="dark" forces it. Keep both blocks equal.
   :where keeps the system block at the weight of :root, so a page stylesheet loaded later still wins. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --ink: #f1ece0; --paper: #2b2338; --cream: #362d47; --bg: #1b1524; --tint: #3a3049; --field: #1f1829;
    --muted: #b9afca; --line: #3f3552; --paper-lo: #1c1626; --sel: #4a3c1e;
    --red: #c4421c; --red-ink: #ff9c80; --green-ink: #8fd6a6;
    --p-grey-b: #3a3049; --p-grey-f: #d9d1e6; --p-blue-b: #1f3550; --p-blue-f: #a9d0f7;
    --p-green-b: #1d3d2a; --p-green-f: #9ddcb2; --p-amber-b: #47360f; --p-amber-f: #f7cf73;
    --p-red-b: #4a1f16; --p-red-f: #ffab94; --p-purple-b: #352553; --p-purple-f: #d1b4f5;
    --code-bg: #0e0b14;
    --focus: #ffd98a; --focus-gap: #1b1524;
    --hold-fill: rgba(255, 156, 128, .45);
    --f-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%232b2338'/%3E%3Cpath d='M1 10h10v1H1z' fill='%231c1626'/%3E%3C/svg%3E");
    --f-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23362d47'/%3E%3Cpath d='M1 1h10v2H1z' fill='%2344395a'/%3E%3Cpath d='M1 9h10v2H1z' fill='%23221b2e'/%3E%3C/svg%3E");
    --f-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23f2b33d'/%3E%3Cpath d='M1 1h10v2H1z' fill='%23ffd98a'/%3E%3Cpath d='M1 9h10v2H1z' fill='%23c98f1c'/%3E%3C/svg%3E");
    --f-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23c4421c'/%3E%3Cpath d='M1 1h10v2H1z' fill='%23de6a42'/%3E%3Cpath d='M1 9h10v2H1z' fill='%2386290f'/%3E%3C/svg%3E");
    --f-sel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%234a3c1e'/%3E%3Cpath d='M1 1h10v2H1z' fill='%235c4b27'/%3E%3Cpath d='M1 9h10v2H1z' fill='%232e250f'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1ece0; --paper: #2b2338; --cream: #362d47; --bg: #1b1524; --tint: #3a3049; --field: #1f1829;
  --muted: #b9afca; --line: #3f3552; --paper-lo: #1c1626; --sel: #4a3c1e;
  --red: #c4421c; --red-ink: #ff9c80; --green-ink: #8fd6a6;
  --p-grey-b: #3a3049; --p-grey-f: #d9d1e6; --p-blue-b: #1f3550; --p-blue-f: #a9d0f7;
  --p-green-b: #1d3d2a; --p-green-f: #9ddcb2; --p-amber-b: #47360f; --p-amber-f: #f7cf73;
  --p-red-b: #4a1f16; --p-red-f: #ffab94; --p-purple-b: #352553; --p-purple-f: #d1b4f5;
  --code-bg: #0e0b14;
  --focus: #ffd98a; --focus-gap: #1b1524;
  --hold-fill: rgba(255, 156, 128, .45);
  --f-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%232b2338'/%3E%3Cpath d='M1 10h10v1H1z' fill='%231c1626'/%3E%3C/svg%3E");
  --f-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23362d47'/%3E%3Cpath d='M1 1h10v2H1z' fill='%2344395a'/%3E%3Cpath d='M1 9h10v2H1z' fill='%23221b2e'/%3E%3C/svg%3E");
  --f-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23f2b33d'/%3E%3Cpath d='M1 1h10v2H1z' fill='%23ffd98a'/%3E%3Cpath d='M1 9h10v2H1z' fill='%23c98f1c'/%3E%3C/svg%3E");
  --f-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%23c4421c'/%3E%3Cpath d='M1 1h10v2H1z' fill='%23de6a42'/%3E%3Cpath d='M1 9h10v2H1z' fill='%2386290f'/%3E%3C/svg%3E");
  --f-sel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z' fill='%230f0b16'/%3E%3Cpath d='M1 1h10v10H1z' fill='%234a3c1e'/%3E%3Cpath d='M1 1h10v2H1z' fill='%235c4b27'/%3E%3Cpath d='M1 9h10v2H1z' fill='%232e250f'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur-sheet: 0s; }
}

/* Base rules every page gets with the tokens. */

/* QA B1 (NOD-225): a display rule must never beat the hidden attribute. */
[hidden] { display: none !important; }

/* QA M7 (NOD-232): one visible focus ring on every control, a page never sets outline: none without a replacement. */
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 var(--focus-offset) var(--focus-gap); }

/* QA m2 (NOD-238): reduced motion turns every animation and smooth scroll off, scripts read web/ds/motion.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; }
}