/* Design tokens. Single source of truth for color, type, spacing, motion.
   Per-playground overrides are forbidden except for one documented accent.
   See docs/AESTHETIC.md for the rules these encode. */

:root {
  /* Backgrounds */
  --bg-light: #FBFBF9;
  --bg-dark:  #0E0F10;
  --bg:       var(--bg-light);
  --surface:  #FFFFFFEE;        /* card surfaces in light */

  /* Foreground */
  --fg:       #1A1B1C;
  --fg-muted: #5C5E61;
  --fg-faint: #6E7073;

  /* Accent (one primary at a time) */
  --accent:        #1B6CA8;
  --accent-warm:   #C13B27;     /* warning / contrast trace, sparingly */
  --accent-soft:   #1B6CA822;

  /* Categorical palette (max 6 simultaneous) */
  --cat-1: #4C72B0;
  --cat-2: #DD8452;
  --cat-3: #55A868;
  --cat-4: #C44E52;
  --cat-5: #8172B2;
  --cat-6: #937860;

  /* Grid and lines */
  --grid:    #9A9C9F4D;          /* 30 percent opacity */
  --grid-strong: #9A9C9F80;
  --stroke-primary:   1.5px;
  --stroke-secondary: 1.0px;
  --stroke-grid:      0.5px;
  --stroke-highlight: 2.5px;

  /* Typography */
  --font-sans: "Inter", "IBM Plex Sans", "Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Charter", "Iowan Old Style", Georgia, serif;
  --font-body-size: 16px;
  --font-body-line: 1.55;
  --font-caption-size: 14.4px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;
  --easing:      cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Shadows */
  --shadow-1: 0 1px 2px #0000000F, 0 1px 1px #0000000F;
  --shadow-2: 0 4px 12px #00000014, 0 1px 2px #00000014;

  /* Layout */
  --content-max: 760px;
  --figure-min:  520px;

  /* === PLAYGROUND LAYOUT SYSTEM v2 ===
     Fluid typography and two-zone grid. See docs spec; these
     supersede any earlier conflicting tokens. */

  /* Fluid typography scale (sizes track the viewport via clamp) */
  --fs-display: clamp(2rem, 1.6vw + 1.4rem, 2.6rem);
  --fs-title:   clamp(1.5rem, 0.6vw + 1.3rem, 1.85rem);
  --fs-heading: clamp(1.125rem, 0.3vw + 1.05rem, 1.3rem);
  --fs-body:    clamp(0.9375rem, 0.25vw + 0.85rem, 1.125rem);
  --fs-small:   clamp(0.8125rem, 0.18vw + 0.75rem, 0.95rem);
  --fs-label:   clamp(0.6875rem, 0.12vw + 0.65rem, 0.8rem);
  --fs-mono:    clamp(0.8125rem, 0.18vw + 0.75rem, 0.95rem);

  /* Layout columns */
  --col-center-max:   880px;
  --col-text-max:     720px;
  --col-controls-max: 720px;
  --col-rail-width:   260px;
  --col-rail-gap:     48px;
  --col-focus-max:    1280px;
  --bp-rails-full:    1400px;
  --bp-single-col:    1023px;

  /* Rail position */
  --rail-sticky-top: 88px;

  /* Focus mode transition */
  --t-focus: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: var(--motion-fast) var(--easing);

  /* Layout v2 semantic aliases over the base palette, so the v2
     stylesheet can use the spec's token names verbatim. */
  --text-primary:   var(--fg);
  --text-secondary: var(--fg-muted);
  --text-dimmed:    var(--fg-faint);
  --border-dim:     var(--grid);
  --border-subtle:  var(--grid-strong);
  --bg-frosted:     color-mix(in srgb, var(--bg) 80%, transparent);
  --accent-gold:    #C9A227;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       var(--bg-dark);
    --surface:  #1A1B1DEE;
    --fg:       #E8E8E6;
    --fg-muted: #9A9C9F;
    --fg-faint: #5C5E61;
    --grid:     #9A9C9F33;
    --grid-strong: #9A9C9F66;
    --accent:        #6BB4E0;
    --accent-warm:   #E48566;
    --accent-soft:   #6BB4E022;
  }
}

[data-theme="dark"] {
  --bg:       var(--bg-dark);
  --surface:  #1A1B1DEE;
  --fg:       #E8E8E6;
  --fg-muted: #9A9C9F;
  --fg-faint: #5C5E61;
  --grid:     #9A9C9F33;
  --grid-strong: #9A9C9F66;
  --accent:        #6BB4E0;
  --accent-warm:   #E48566;
  --accent-soft:   #6BB4E022;
}

[data-theme="light"] {
  --bg:       var(--bg-light);
  --surface:  #FFFFFFEE;
  --fg:       #1A1B1C;
  --fg-muted: #5C5E61;
  --fg-faint: #6E7073;
  --grid:     #9A9C9F4D;
  --grid-strong: #9A9C9F80;
  --accent:        #1B6CA8;
  --accent-warm:   #C13B27;
  --accent-soft:   #1B6CA822;
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
    --t-focus: 0ms;
  }
}

/* Gradient pill: a small uppercase chip used to mark special playgrounds
   (multi-mode tours, featured pieces). Originally introduced as the
   "LEGEND" badge; promoted here for reuse with color variants matched to
   the playground's topic. Apply as: <span class="pill pill--violet">SHOWCASE</span> */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  color: #000;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-left: 8px;
}
.pill--amber  { background: linear-gradient(90deg, #ffd28a, #ff7c8a); }
.pill--rose   { background: linear-gradient(90deg, #ffc8e0, #ff8aa8); }
.pill--cyan   { background: linear-gradient(90deg, #b9d8ff, #7ec8f0); }
.pill--mint   { background: linear-gradient(90deg, #b8f0c8, #6ed8a8); }
.pill--violet { background: linear-gradient(90deg, #d8b8ff, #a880ff); }
.pill--gold   { background: linear-gradient(90deg, #ffe7a8, #c9a84c); }