:root {
  color-scheme: dark;

  /* Parent brand */
  --bw-ink: #0b0b0a;
  --bw-ink-raised: #151513;
  --bw-graphite: #252522;
  --bw-fog: #a8a49c;
  --bw-paper: #f3f0e8;
  --bw-copper: #f29a66;
  --bw-copper-ink: #9a4a1c; /* copper for text on paper; #f29a66 fails there */
  --bw-fog-ink: #5f5b53; /* supporting copy on paper */

  /* Product accents. Never mix these within one product surface. */
  --mindpool-primary: #355c49;
  --mindpool-surface: #eef1e8;
  --mindpool-signal: #c7f46d;
  --scout-primary: #0c8c69;
  --scout-ink: #0a6e53; /* emerald for text and fills; primary is large type and rails only */
  --scout-surface: #eff1eb;
  --luma-primary: #dcff47;
  --luma-surface: #080908;
  --notch-primary: #8fd3ff;
  --notch-surface: #071522;

  /* Type */
  --font-display: "Manrope", "Avenir Next", sans-serif;
  --font-body: "Manrope", "Avenir Next", sans-serif;
  --font-mono: "DM Mono", "SFMono-Regular", monospace;

  /* Modular type scale */
  --text-hero: clamp(3.75rem, 8vw, 7.5rem);
  --text-display: clamp(2.75rem, 5vw, 5rem);
  --text-title: clamp(1.75rem, 3vw, 2.75rem);
  --text-body: 1rem;
  --text-small: 0.8125rem;
  --text-label: 0.6875rem;

  /* Space: 4px base, deliberately sparse at page scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Shape: controls, containers, app icons */
  --radius-control: 999px;
  --radius-card: 1.25rem;
  --radius-panel: 2rem;
  --radius-icon: 24%;

  /* Material */
  --hairline-dark: rgb(255 255 255 / 0.1);
  --hairline-light: rgb(11 11 10 / 0.1);
  --inner-highlight: inset 0 1px 0 rgb(255 255 255 / 0.12);
  --shadow-float: 0 28px 80px rgb(0 0 0 / 0.28);
  --ease-mass: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
}

/*
  Semantic layer. Components use these, never the brand values above.
  Parent/services: no attribute. Product: <html data-brand="mindpool">.
  One attribute per page is what keeps a surface to one accent.
*/
:root {
  --surface: var(--bw-ink);
  --surface-raised: var(--bw-ink-raised);
  --text: var(--bw-paper);
  --text-muted: var(--bw-fog);
  --accent: var(--bw-copper);
  --on-accent: var(--bw-ink);
  --hairline: var(--hairline-dark);
}

[data-surface="paper"] {
  color-scheme: light;
  --surface: var(--bw-paper);
  --surface-raised: #fbf9f3;
  --text: var(--bw-ink);
  --text-muted: var(--bw-fog-ink);
  --accent: var(--bw-copper-ink);
  --on-accent: var(--bw-paper);
  --hairline: var(--hairline-light);
}

[data-brand="mindpool"] {
  color-scheme: light;
  --surface: var(--mindpool-surface);
  --surface-raised: #fafaf4;
  --text: #17211c;
  --text-muted: #55625a;
  --accent: var(--mindpool-primary);
  --on-accent: var(--mindpool-signal);
  --hairline: var(--hairline-light);
}

[data-brand="scout"] {
  color-scheme: light;
  --surface: var(--scout-surface);
  --surface-raised: #fafbf7;
  --text: #14211d;
  --text-muted: #57625b;
  --accent: var(--scout-ink);
  --on-accent: #ffffff;
  --hairline: var(--hairline-light);
}

[data-brand="luma"] {
  --surface: var(--luma-surface);
  --surface-raised: #141613;
  --text: #f4f2e9;
  --text-muted: #9da098;
  --accent: var(--luma-primary);
  --on-accent: var(--bw-ink);
}

[data-brand="notch"] {
  --surface: var(--notch-surface);
  --surface-raised: #0e1c2b;
  --text: #f4f8fb;
  --text-muted: #93a4b1;
  --accent: var(--notch-primary);
  --on-accent: var(--bw-ink);
}

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