/* LeiaIDE design tokens.
 *
 * s61 ships four themes: classic-light, classic-dark, kids, 8bit.
 * Themes are presentation options available to any learner. They are never
 * an age gate and never change what the product can do.
 *
 * Rules enforced by test/design-tokens.test.js:
 *   1. This file is the ONLY stylesheet allowed to contain colour literals.
 *   2. Every theme block defines the identical set of semantic tokens.
 *   3. Every theme passes WCAG AA (4.5:1) for body and UI text pairs, and
 *      3:1 for focus rings against their backgrounds.
 *
 * Fonts are system stacks. The app must render correctly with no network,
 * so remote font CDNs are forbidden (ARCHITECTURE §9).
 */

/* ------------------------------------------------------------------ *
 * Scale tokens — shared by every theme, adjusted by presentation props
 * ------------------------------------------------------------------ */

:root {
  /* Spacing rhythm. Everything in the shell is a multiple of these. */
  --space-0: 0;
  --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;

  /* Type scale, in rem so 200% text zoom scales the whole interface. */
  --text-xs: 0.6875rem;
  --text-sm: 0.78125rem;
  --text-md: 0.84375rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.9375rem;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-body: 1.6;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.16em;

  --weight-regular: 400;
  --weight-medium: 550;
  --weight-semibold: 650;
  --weight-bold: 750;

  /* Control geometry. --control-h is resolved by [data-control-size]. */
  --control-h-sm: 1.75rem;
  --control-h-md: 2.125rem;
  --control-h-lg: 2.625rem;
  --control-h: var(--control-h-md);
  --control-pad-x: var(--space-3);
  --tap-min: 2.25rem;

  /* Layout rhythm. --pane-gap is resolved by [data-density]. */
  --pane-gap: var(--space-3);
  --stack-gap: var(--space-3);
  --row-gap: var(--space-2);
  --pane-pad: var(--space-4);

  --left-w: 17.5rem;
  --right-w: 23rem;

  /* Motion. --dur-* collapse to 0 when animation is off. */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 480ms;

  /* Blur depth for layered surfaces. */
  --blur-sm: 8px;
  --blur-md: 18px;
  --blur-lg: 32px;

  /* Stacking order. Nothing in the app may invent a z-index outside this. */
  --z-ambient: 0;
  --z-shell: 1;
  --z-sticky: 10;
  --z-dock: 20;
  --z-overlay: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --z-tooltip: 70;
}

/* ------------------------------------------------------------------ *
 * Theme: Classic Light
 * ------------------------------------------------------------------ */

[data-theme="classic-light"] {
  --bg: #eef1f6;
  --bg-raise: #ffffff;
  --bg-sunken: #e3e8f0;
  --pane: #f7f9fc;
  --scrim: rgba(17, 21, 30, 0.38);
  --overlay-bg: #ffffff;

  --fg: #131722;
  --fg-strong: #05070c;
  --muted: #545d6e;

  --border: #d6dde9;
  --hairline: rgba(19, 23, 34, 0.09);
  --hairline-strong: rgba(19, 23, 34, 0.17);
  --divider: #dfe5ee;

  --accent: #0d6e66;
  --accent-ink: #0a5650;
  --accent-soft: #d3f2ee;
  --accent-ghost: rgba(13, 110, 102, 0.09);
  --on-accent: #ffffff;

  --success: #15803d;
  --success-ink: #106331;
  --success-soft: #d6f2e0;
  --on-success: #ffffff;

  --warn: #b45309;
  --warn-ink: #8a4008;
  --warn-soft: #fbeacd;
  --on-warn: #ffffff;

  --danger: #c62828;
  --danger-ink: #9b1c1c;
  --danger-soft: #fbdcdc;
  --on-danger: #ffffff;

  --info: #0369a1;
  --info-ink: #075985;
  --info-soft: #d5eaf8;
  --on-info: #ffffff;

  --focus-ring: #0d6e66;
  --selection-bg: #bfe9e3;
  --selection-fg: #082c29;

  --code-bg: #e9edf4;
  --code-fg: #1d2330;
  --code-border: #d3dae6;

  --glass: rgba(255, 255, 255, 0.66);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --inner-highlight: rgba(255, 255, 255, 0.62);
  --scroll-thumb: rgba(19, 23, 34, 0.2);
  --scroll-thumb-hover: rgba(19, 23, 34, 0.34);

  --shadow-soft: 0 1px 2px rgba(19, 23, 34, 0.05), 0 10px 32px -14px rgba(13, 110, 102, 0.22);
  --shadow-lift: 0 2px 6px rgba(19, 23, 34, 0.07), 0 22px 56px -18px rgba(13, 110, 102, 0.3);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 8px 22px -10px rgba(13, 110, 102, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --orb-a: #99f6e4;
  --orb-b: #fde68a;
  --orb-c: #fecdd3;
  --orb-opacity: 0.3;
  --grain-opacity: 0.03;
  --grain-dot: rgba(120, 126, 140, 0.5);

  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --tracking-display: -0.02em;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --control-radius: 10px;

  --focus-width: 2px;
  --focus-offset: 2px;
  --border-width: 1px;
}

/* ------------------------------------------------------------------ *
 * Theme: Classic Dark
 * ------------------------------------------------------------------ */

[data-theme="classic-dark"] {
  --bg: #0a0b0f;
  --bg-raise: #14161c;
  --bg-sunken: #06070a;
  --pane: #101218;
  --scrim: rgba(0, 0, 0, 0.62);
  --overlay-bg: #14161c;

  --fg: #f2f4f8;
  --fg-strong: #ffffff;
  --muted: #a3abbb;

  --border: #2a2e39;
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --divider: #23262f;

  --accent: #2dd4bf;
  --accent-ink: #5eead4;
  --accent-soft: #10403b;
  --accent-ghost: rgba(45, 212, 191, 0.12);
  --on-accent: #052e2a;

  --success: #34d399;
  --success-ink: #6ee7b7;
  --success-soft: #0d3b2c;
  --on-success: #04231a;

  --warn: #fbbf24;
  --warn-ink: #fcd34d;
  --warn-soft: #40300a;
  --on-warn: #3d2a03;

  --danger: #f87171;
  --danger-ink: #fca5a5;
  --danger-soft: #45191c;
  --on-danger: #2b0505;

  --info: #38bdf8;
  --info-ink: #7dd3fc;
  --info-soft: #0b3a52;
  --on-info: #04202e;

  --focus-ring: #2dd4bf;
  --selection-bg: #14504a;
  --selection-fg: #ecfeff;

  --code-bg: #0e1016;
  --code-fg: #e6e9f0;
  --code-border: #262a34;

  --glass: rgba(20, 22, 28, 0.62);
  --glass-strong: rgba(20, 22, 28, 0.9);
  --inner-highlight: rgba(255, 255, 255, 0.07);
  --scroll-thumb: rgba(255, 255, 255, 0.18);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.32);

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 40px -16px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 2px 8px rgba(0, 0, 0, 0.55), 0 28px 70px -20px rgba(45, 212, 191, 0.22);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 8px 26px -10px rgba(45, 212, 191, 0.4);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --orb-a: #0f766e;
  --orb-b: #7c2d12;
  --orb-c: #155e75;
  --orb-opacity: 0.26;
  --grain-opacity: 0.04;
  --grain-dot: rgba(160, 166, 184, 0.4);

  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --tracking-display: -0.02em;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --control-radius: 10px;

  --focus-width: 2px;
  --focus-offset: 2px;
  --border-width: 1px;
}

/* ------------------------------------------------------------------ *
 * Theme: Kids — warmer, rounder, larger targets. Calm, not garish.
 * ------------------------------------------------------------------ */

[data-theme="kids"] {
  --bg: #fdf4e8;
  --bg-raise: #ffffff;
  --bg-sunken: #f6e8d5;
  --pane: #fffaf2;
  --scrim: rgba(51, 36, 15, 0.4);
  --overlay-bg: #ffffff;

  --fg: #33240f;
  --fg-strong: #1d1406;
  --muted: #6d5636;

  --border: #f0ddc2;
  --hairline: rgba(51, 36, 15, 0.1);
  --hairline-strong: rgba(51, 36, 15, 0.2);
  --divider: #f2e3cc;

  --accent: #c2410c;
  --accent-ink: #9a3412;
  --accent-soft: #ffe2cf;
  --accent-ghost: rgba(194, 65, 12, 0.1);
  --on-accent: #ffffff;

  --success: #15803d;
  --success-ink: #0f6330;
  --success-soft: #d9f2e2;
  --on-success: #ffffff;

  --warn: #b45309;
  --warn-ink: #8a4008;
  --warn-soft: #fdeacb;
  --on-warn: #ffffff;

  --danger: #c62828;
  --danger-ink: #9b1c1c;
  --danger-soft: #fcdcdc;
  --on-danger: #ffffff;

  --info: #0369a1;
  --info-ink: #075985;
  --info-soft: #d8ebf8;
  --on-info: #ffffff;

  --focus-ring: #c2410c;
  --selection-bg: #ffd9bd;
  --selection-fg: #3a1c06;

  --code-bg: #f6ead6;
  --code-fg: #33240f;
  --code-border: #ecd9ba;

  --glass: rgba(255, 250, 242, 0.72);
  --glass-strong: rgba(255, 250, 242, 0.93);
  --inner-highlight: rgba(255, 255, 255, 0.7);
  --scroll-thumb: rgba(51, 36, 15, 0.22);
  --scroll-thumb-hover: rgba(51, 36, 15, 0.36);

  --shadow-soft: 0 1px 2px rgba(51, 36, 15, 0.06), 0 12px 34px -14px rgba(194, 65, 12, 0.28);
  --shadow-lift: 0 2px 6px rgba(51, 36, 15, 0.08), 0 26px 58px -18px rgba(194, 65, 12, 0.36);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.72) inset, 0 8px 22px -10px rgba(194, 65, 12, 0.46);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  --orb-a: #fed7aa;
  --orb-b: #fde68a;
  --orb-c: #f9a8d4;
  --orb-opacity: 0.34;
  --grain-opacity: 0.025;
  --grain-dot: rgba(140, 118, 88, 0.45);

  --font-display: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Trebuchet MS", system-ui, sans-serif;
  --font-ui: ui-rounded, "SF Pro Rounded", "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tracking-display: -0.005em;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;
  --control-radius: 16px;

  --focus-width: 3px;
  --focus-offset: 3px;
  --border-width: 1px;

  --control-h-sm: 2rem;
  --control-h-md: 2.5rem;
  --control-h-lg: 3rem;
  --tap-min: 2.75rem;
  --text-base: 1rem;
  --text-md: 0.9375rem;
  --leading-body: 1.7;
}

/* ------------------------------------------------------------------ *
 * Theme: 8bit — crisp edges, limited palette, chunky focus rings.
 * The retro display face comes from the mono stack plus tracking; we
 * deliberately ship no webfont, so nothing can fail to load.
 * ------------------------------------------------------------------ */

[data-theme="8bit"] {
  --bg: #0b0b1a;
  --bg-raise: #1b1b3a;
  --bg-sunken: #07070f;
  --pane: #15152e;
  --scrim: rgba(3, 3, 10, 0.7);
  --overlay-bg: #1b1b3a;

  --fg: #f4f4ff;
  --fg-strong: #ffffff;
  --muted: #a9a9d6;

  --border: #3b3b70;
  --hairline: rgba(0, 229, 140, 0.18);
  --hairline-strong: rgba(0, 229, 140, 0.36);
  --divider: #2b2b56;

  --accent: #00e58c;
  --accent-ink: #5cffc2;
  --accent-soft: #0c3b2a;
  --accent-ghost: rgba(0, 229, 140, 0.12);
  --on-accent: #04120c;

  --success: #00e58c;
  --success-ink: #5cffc2;
  --success-soft: #0c3b2a;
  --on-success: #04120c;

  --warn: #ffd23f;
  --warn-ink: #ffe37a;
  --warn-soft: #453a06;
  --on-warn: #241c00;

  --danger: #ff5f6d;
  --danger-ink: #ff9aa3;
  --danger-soft: #47121c;
  --on-danger: #1a0206;

  --info: #4dd7ff;
  --info-ink: #93e7ff;
  --info-soft: #0a3a4c;
  --on-info: #021620;

  --focus-ring: #00e58c;
  --selection-bg: #12523c;
  --selection-fg: #eafff5;

  --code-bg: #0c0c20;
  --code-fg: #d9ffe9;
  --code-border: #303065;

  --glass: rgba(21, 21, 46, 0.78);
  --glass-strong: rgba(21, 21, 46, 0.96);
  --inner-highlight: rgba(0, 229, 140, 0.12);
  --scroll-thumb: rgba(0, 229, 140, 0.3);
  --scroll-thumb-hover: rgba(0, 229, 140, 0.5);

  --shadow-soft: 0 2px 0 rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 4px 0 rgba(0, 0, 0, 0.65);
  --shadow-pop: 0 0 0 2px rgba(0, 229, 140, 0.4);
  --shadow-inset: inset 0 2px 0 rgba(0, 229, 140, 0.1);

  --orb-a: #0c3b2a;
  --orb-b: #2a1a55;
  --orb-c: #0a3a4c;
  --orb-opacity: 0.2;
  --grain-opacity: 0.06;
  --grain-dot: rgba(0, 229, 140, 0.35);

  --font-display: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --font-ui: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --tracking-display: 0.06em;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-pill: 2px;
  --control-radius: 0px;

  --focus-width: 3px;
  --focus-offset: 0px;
  --border-width: 2px;

  --blur-sm: 0px;
  --blur-md: 0px;
  --blur-lg: 0px;
  --ease-standard: steps(4, end);
  --ease-enter: steps(4, end);
  --ease-exit: steps(4, end);
}

/* ------------------------------------------------------------------ *
 * s62 adaptive presentation props
 * ------------------------------------------------------------------ */

[data-density="compact"] {
  --pane-gap: var(--space-2);
  --stack-gap: var(--space-2);
  --row-gap: var(--space-1);
  --pane-pad: var(--space-3);
  --leading-body: 1.45;
}

[data-density="comfortable"] {
  --pane-gap: var(--space-3);
  --stack-gap: var(--space-3);
  --row-gap: var(--space-2);
  --pane-pad: var(--space-4);
}

[data-density="spacious"] {
  --pane-gap: var(--space-5);
  --stack-gap: var(--space-5);
  --row-gap: var(--space-3);
  --pane-pad: var(--space-6);
  --leading-body: 1.75;
}

[data-control-size="small"] { --control-h: var(--control-h-sm); --control-pad-x: var(--space-2); }
[data-control-size="medium"] { --control-h: var(--control-h-md); --control-pad-x: var(--space-3); }
[data-control-size="large"] { --control-h: var(--control-h-lg); --control-pad-x: var(--space-4); --text-md: var(--text-base); }

[data-animation="reduced"] {
  --dur-instant: 1ms;
  --dur-fast: 90ms;
  --dur-med: 120ms;
  --dur-slow: 140ms;
}

[data-animation="off"] {
  --dur-instant: 0ms;
  --dur-fast: 0ms;
  --dur-med: 0ms;
  --dur-slow: 0ms;
  --orb-opacity: 0;
}

/* Touch input asks for bigger hit areas regardless of control size. */
[data-input-modality="touch"] { --tap-min: 2.75rem; --control-h-sm: 2.25rem; }