/* Follow the Question: design tokens. FROZEN after wave 0. Owner: orchestrator.
   Other stylesheets consume these variables and may define their own prefixed ones. */

:root {
  color-scheme: light dark;

  /* type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-hero: clamp(2.25rem, 5vw + 1rem, 4rem);
  --lh-tight: 1.2;
  --lh-body: 1.65;
  --font-scale: 1; /* set by the settings panel: 0.9, 1, 1.15, 1.3 */

  /* space, radius, motion */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  /* layout */
  --sidebar-w: 288px;
  --rail-w: 248px;
  --read-w: 46rem;      /* prose */
  --wide-w: 64rem;      /* tables, boards, diagrams */
  --topbar-h: 56px;
  /* breakpoints (documentation only, CSS variables cannot be used in media queries):
     sm 640px, md 900px, lg 1200px */

  /* brand */
  --brand-1: #6d5efc;
  --brand-2: #22d3ee;
  --brand-grad: linear-gradient(135deg, var(--brand-1) 0%, #8b5cf6 45%, var(--brand-2) 100%);
  --gold: #f5b301;

  /* semantic (light) */
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --bad: #b91c1c;
  --bad-soft: #fee2e2;
  --info: #1d4ed8;
  --info-soft: #dbeafe;
  --preview: #7e22ce;
  --preview-soft: #f3e8ff;

  /* surfaces (light) */
  --bg: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #eef0f8;
  --surface-3: #e4e8f4;
  --border: #d9deec;
  --border-strong: #b9c1da;
  --text: #141a2e;
  --text-2: #444d6b;
  --muted: #646c8c;
  --link: #3730a3;
  --focus: #6d5efc;
  --code-bg: #eef0f8;
  --shadow-1: 0 1px 2px rgba(20, 26, 46, 0.06), 0 1px 3px rgba(20, 26, 46, 0.08);
  --shadow-2: 0 4px 10px rgba(20, 26, 46, 0.08), 0 12px 28px rgba(20, 26, 46, 0.1);
  --overlay: rgba(10, 14, 30, 0.5);

  /* default accent (overridden per world through [data-world]) */
  --accent: #4f46e5;
  --on-accent: #ffffff;
}

[data-theme="dark"] {
  --ok: #4ade80;
  --ok-soft: #12301f;
  --warn: #fbbf24;
  --warn-soft: #3a2a0a;
  --bad: #f87171;
  --bad-soft: #3b1414;
  --info: #7aa7ff;
  --info-soft: #15264d;
  --preview: #c4a1ff;
  --preview-soft: #2a1a47;

  --bg: #0a0f1f;
  --surface: #121a33;
  --surface-2: #19234a;
  --surface-3: #212d5c;
  --border: #27335f;
  --border-strong: #3a4880;
  --text: #e9edfb;
  --text-2: #b7bfdc;
  --muted: #8f99c0;
  --link: #a5b4fc;
  --focus: #8b9cff;
  --code-bg: #0d1530;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --overlay: rgba(0, 0, 0, 0.6);
}

/* follow the OS unless the user picked a theme explicitly (data-theme="light" or "dark") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ok: #4ade80;
    --ok-soft: #12301f;
    --warn: #fbbf24;
    --warn-soft: #3a2a0a;
    --bad: #f87171;
    --bad-soft: #3b1414;
    --info: #7aa7ff;
    --info-soft: #15264d;
    --preview: #c4a1ff;
    --preview-soft: #2a1a47;

    --bg: #0a0f1f;
    --surface: #121a33;
    --surface-2: #19234a;
    --surface-3: #212d5c;
    --border: #27335f;
    --border-strong: #3a4880;
    --text: #e9edfb;
    --text-2: #b7bfdc;
    --muted: #8f99c0;
    --link: #a5b4fc;
    --focus: #8b9cff;
    --code-bg: #0d1530;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
    --overlay: rgba(0, 0, 0, 0.6);
  }
}

/* Per-world accents. Fill colours are 600 to 800 shades so white text passes AA on them.
   Text and tints are derived with color-mix so they adapt to both themes:
     --accent-text : readable on --surface in either theme
     --accent-soft : subtle tint background
     --accent-line : border colour */
[data-world] {
  --on-accent: #ffffff;
  --accent-text: color-mix(in srgb, var(--accent) 52%, var(--text));
  --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --accent-soft-2: color-mix(in srgb, var(--accent) 24%, var(--surface));
  --accent-line: color-mix(in srgb, var(--accent) 50%, var(--border));
}

[data-world="w00"] { --accent: #7c3aed; }
[data-world="w01"] { --accent: #4f46e5; }
[data-world="w02"] { --accent: #2563eb; }
[data-world="w03"] { --accent: #0e7490; }
[data-world="w04"] { --accent: #0f766e; }
[data-world="w05"] { --accent: #047857; }
[data-world="w06"] { --accent: #15803d; }
[data-world="w07"] { --accent: #b91c1c; }
[data-world="w08"] { --accent: #b45309; }
[data-world="w09"] { --accent: #c2410c; }
[data-world="w10"] { --accent: #a16207; }
[data-world="w11"] { --accent: #0369a1; }
[data-world="w12"] { --accent: #1e40af; }
[data-world="w13"] { --accent: #be185d; }
[data-world="w14"] { --accent: #a21caf; }
[data-world="w15"] { --accent: #4d7c0f; }
[data-world="w16"] { --accent: #475569; }
[data-world="w17"] { --accent: #9f1239; }
[data-world="w18"] { --accent: #6b21a8; }
[data-world="w19"] { --accent: #f59e0b; --on-accent: #1f1300; }

/* Keep the default accent available outside any world (home, progress, library) */
[data-world="home"] { --accent: #4f46e5; }

/* Utilities every stylesheet can rely on */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}