/*
 * Turbo Scratch design tokens. Source of truth: docs/DESIGN-SYSTEM.md.
 *
 * Every colour, radius, shadow, duration and font in the site comes from
 * this file. Components (components.css) and templates use var(--…) only.
 *
 * Theme contract: dark values apply when <html> has the class "dark".
 * The head script in layout.html sets that class from localStorage.theme,
 * or from prefers-color-scheme when the visitor has not chosen. There is
 * deliberately no prefers-color-scheme block here: it would undo a visitor
 * who picked "light" on a dark-mode device.
 *
 * Every text/background pair below was checked for WCAG 2.2 AA. The ratios
 * are in docs/DESIGN-SYSTEM.md, section 3.
 */

/* Figtree, SIL OFL 1.1 (fonts/OFL.txt). Self-hosted, latin subset. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/figtree-latin-800-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- Colour: surfaces and text ---- */
  --color-bg: #f6f6fb;            /* page background */
  --color-surface: #ffffff;       /* cards, header, inputs */
  --color-surface-2: #eeeff7;     /* sunken areas, code, table header */
  --color-border: #dcdeea;        /* decorative hairlines */
  --color-border-strong: #7c8199; /* input and control outlines (3:1) */
  --color-text: #191c2e;          /* body text, headings */
  --color-text-2: #454a62;        /* secondary text */
  --color-text-3: #5a6079;        /* captions, meta, placeholders */

  /* ---- Colour: brand ---- */
  --color-brand: #4a3ad0;         /* links, focus, brand text */
  --color-brand-hover: #3b2db0;
  --color-brand-solid: #4a3ad0;   /* primary button fill */
  --color-brand-solid-hover: #3b2db0;
  --color-brand-edge: #2a1f85;    /* chunky bottom edge of primary button */
  --color-brand-tint: #eeebff;    /* soft brand backgrounds */
  --color-brand-ink: #3a2ca8;     /* text on brand tint */
  --color-on-brand: #ffffff;      /* text on brand solid and tool solids */
  --color-bolt: #ffc21a;          /* lightning mark and highlights. Never text. */
  --color-on-bolt: #000000;

  /* ---- Colour: tools (A blue = Motion, B green = Operators, C orange = Control) ---- */
  --color-tool-a: #2563d6;
  --color-tool-a-tint: #e5efff;
  --color-tool-a-ink: #1c4da6;
  --color-tool-b: #1f7f45;
  --color-tool-b-tint: #e2f4e8;
  --color-tool-b-ink: #196737;
  --color-tool-c: #b85300;
  --color-tool-c-tint: #ffebd6;
  --color-tool-c-ink: #8f4100;

  /* ---- Colour: status. Always pair with an icon and a word. ---- */
  --color-ok: #17713f;
  --color-ok-tint: #e3f4ea;
  --color-warn: #94500a;
  --color-warn-tint: #fff1d9;
  --color-bad: #b42234;
  --color-bad-tint: #fde7ea;

  /* ---- Colour: block preview ----
   * Scratch 3 high-contrast theme (scratch-gui src/lib/themes/high-contrast).
   * Block text is black: 9.97:1 or more on every category. The same values
   * apply in both themes, because blocks are content, not chrome. */
  --block-text: #000000;
  --block-motion: #80b5ff;
  --block-motion-edge: #3373cc;
  --block-looks: #ccb3ff;
  --block-looks-edge: #774dcb;
  --block-sound: #e19de1;
  --block-sound-edge: #bd42bd;
  --block-events: #ffd966;
  --block-events-edge: #cc9900;
  --block-control: #ffbe4c;
  --block-control-edge: #cf8b17;
  --block-sensing: #85c4e0;
  --block-sensing-edge: #2e8eb8;
  --block-operators: #7ece7e;
  --block-operators-edge: #389438;
  --block-variables: #ffa54c;
  --block-variables-edge: #db6e00;
  --block-lists: #ff9966;
  --block-lists-edge: #e64d00;
  --block-myblocks: #ff99aa;
  --block-myblocks-edge: #ff3355;
  --block-pen: #13ecaf;
  --block-pen-edge: #0b8e69;
  --block-input: #ffffff;
  --workspace-bg: #f9f9fc;
  --workspace-dot: #dcdeea;

  /* ---- Colour: misc ---- */
  --color-focus: #4a3ad0;
  --color-focus-gap: #ffffff;
  --color-scrim: rgb(14 16 32 / 0.55);
  --color-thumb-bg: #191c2e;      /* behind project thumbnails */
  --color-ad-reserve: #eeeff7;    /* our wrapper only. Never on the ad itself. */

  /* ---- Type ---- */
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-heavy: 800;

  /* Major-third scale (1.25) on a 17 px body. Display sizes grow with the viewport. */
  --text-xs: 0.8125rem;   /* 13 px: badges, legal */
  --text-sm: 0.9375rem;   /* 15 px: meta, captions, footer */
  --text-base: 1.0625rem; /* 17 px: body */
  --text-lg: 1.25rem;     /* 20 px: lead, card titles */
  --text-xl: 1.5rem;      /* 24 px: h3 */
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);  /* 24-30 px: h2 */
  --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);    /* 30-40 px: page h1 */
  --text-4xl: clamp(2.125rem, 1.4rem + 3.2vw, 3.25rem); /* 34-52 px: home hero */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.06em;
  --measure: 68ch;        /* longest line in prose */

  /* ---- Space: 4 px base ---- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */

  --gutter: var(--space-4);          /* page side padding below 768 px */
  --gutter-wide: var(--space-8);     /* page side padding from 768 px */
  --container: 72rem;                /* 1152 px: home, tool pages */
  --container-narrow: 48rem;         /* 768 px: guides, legal */
  --header-h: 4rem;

  /* ---- Size ---- */
  --target-min: 2.75rem;             /* 44 px: every control */
  --icon-sm: 1.25rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --tool-tile: 3rem;
  --border-w: 1px;
  --border-w-thick: 2px;
  --focus-w: 3px;
  --focus-offset: 2px;

  /* ---- Radius ---- */
  --radius-sm: 0.375rem; /* 6: chips, code, small badges */
  --radius-md: 0.625rem; /* 10: inputs, buttons */
  --radius-lg: 1rem;     /* 16: cards, panels */
  --radius-xl: 1.5rem;   /* 24: hero panel, workspace */
  --radius-pill: 999px;
  --radius-block: 0.375rem; /* block preview corners */

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgb(25 28 46 / 0.06);
  --shadow-md: 0 2px 4px rgb(25 28 46 / 0.06), 0 8px 24px rgb(25 28 46 / 0.08);
  --shadow-lg: 0 4px 8px rgb(25 28 46 / 0.08), 0 20px 48px rgb(25 28 46 / 0.12);
  --shadow-edge: 0 3px 0;   /* chunky button edge; colour is added per button */
  --shadow-edge-pressed: 0 1px 0;

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lift: -2px;     /* hover lift for cards */
  --press: 2px;     /* press depth for chunky buttons */

  /* ---- Layers ---- */
  --z-header: 40;
  --z-menu: 45;
  --z-ad-widget: 50;  /* ColorMagic widget in layout.html uses z-50. Stay below. */

  /* ---- Ad reservation (our wrappers only) ---- */
  --ad-widget-w: 300px;     /* ColorMagic iframe, layout.html */
  --ad-widget-h: 168px;
  --ad-widget-inset: 1rem;  /* its bottom-4 left-4 position */
  --ad-safe-bottom: calc(var(--ad-widget-h) + var(--ad-widget-inset) * 2);
  --ad-slot-min-h: 280px;   /* future in-content display slot */
}

html.dark {
  color-scheme: dark;

  --color-bg: #0e1020;
  --color-surface: #171a2d;
  --color-surface-2: #20243b;
  --color-border: #2d3252;
  --color-border-strong: #6c739a;
  --color-text: #eceef8;
  --color-text-2: #c0c5db;
  --color-text-3: #a0a6c2;

  --color-brand: #a498ff;
  --color-brand-hover: #bdb4ff;
  --color-brand-solid: #5b4be6;
  --color-brand-solid-hover: #4a3ad0;
  --color-brand-edge: #2a1f85;
  --color-brand-tint: #25214d;
  --color-brand-ink: #cec8ff;
  --color-on-brand: #ffffff;

  --color-tool-a: #3b7bea;
  --color-tool-a-tint: #132748;
  --color-tool-a-ink: #a8c8ff;
  --color-tool-b: #24934f;
  --color-tool-b-tint: #10301e;
  --color-tool-b-ink: #93ddb0;
  --color-tool-c: #c96a12;
  --color-tool-c-tint: #382210;
  --color-tool-c-ink: #ffc48f;

  --color-ok: #6fd69b;
  --color-ok-tint: #10301e;
  --color-warn: #f5be62;
  --color-warn-tint: #36270d;
  --color-bad: #ff8d99;
  --color-bad-tint: #3d1a20;

  --workspace-bg: #1b1e33;
  --workspace-dot: #2d3252;

  --color-focus: #a498ff;
  --color-focus-gap: #0e1020;
  --color-scrim: rgb(0 0 0 / 0.65);
  --color-thumb-bg: #000000;
  --color-ad-reserve: #20243b;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 20px 48px rgb(0 0 0 / 0.5);
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--gutter-wide);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --lift: 0px;
    --press: 0px;
  }
}