/*
  Wicked Curious design tokens.
  Source of truth: docs/brand.md. Change a value here and in brand.md together.
  Contrast notes: Bunsen and Bubbler are never text colors on light
  backgrounds; use --wc-bunsen-deep for orange text and links.
*/

:root {
  /* Core palette */
  --wc-spy-pond: #0B2A4A;      /* ink: text, outlines, the eye, dark surfaces */
  --wc-graph-paper: #F3F6FA;   /* page background */
  --wc-grid: #DCE4EE;          /* grid lines, hairlines (decorative only) */
  --wc-white: #FFFFFF;         /* cards, inputs */
  --wc-bunsen: #FF6B2C;        /* primary buttons, the logo dot, highlights */
  --wc-bunsen-deep: #C2410C;   /* orange text and links on light backgrounds */
  --wc-bubbler: #2EC4B6;       /* second accent: science, selected cells */
  --wc-lantern: #FFC83D;       /* "new", stickers, save bars (sparingly) */

  /* Supporting */
  --wc-slate: #3D5470;         /* secondary text on light */
  --wc-night-pond: #0A1626;    /* dark-mode page background */
  --wc-mist: #B8C7D9;          /* secondary text on dark */
  --wc-pond-panel: #133A62;    /* raised panels on dark */

  /* Tints */
  --wc-bunsen-tint: #FFE1D3;   /* reading chips */
  --wc-bubbler-tint: #CFF3EF;  /* nature chips */
  --wc-lantern-tint: #FFF0C2;  /* history chips */
  --wc-notice: #FFF4D6;        /* "check with the venue" notices */

  /* Semantic roles (components use these, not the raw palette) */
  --wc-bg: var(--wc-graph-paper);
  --wc-surface: var(--wc-white);
  --wc-text: var(--wc-spy-pond);
  --wc-text-muted: var(--wc-slate);
  --wc-border: var(--wc-spy-pond);
  --wc-hairline: var(--wc-grid);
  --wc-link: var(--wc-bunsen-deep);
  --wc-link-hover: var(--wc-spy-pond);
  --wc-focus: var(--wc-spy-pond);
  --wc-accent: var(--wc-bunsen);
  --wc-on-accent: var(--wc-spy-pond);

  /* Topic chips: background / text */
  --wc-topic-science-bg: var(--wc-bubbler);
  --wc-topic-science-fg: var(--wc-spy-pond);
  --wc-topic-technology-bg: var(--wc-spy-pond);
  --wc-topic-technology-fg: var(--wc-graph-paper);
  --wc-topic-engineering-bg: var(--wc-lantern);
  --wc-topic-engineering-fg: var(--wc-spy-pond);
  --wc-topic-arts-bg: var(--wc-bunsen);
  --wc-topic-arts-fg: var(--wc-spy-pond);
  --wc-topic-math-bg: var(--wc-white);
  --wc-topic-math-fg: var(--wc-spy-pond);
  --wc-topic-nature-bg: var(--wc-bubbler-tint);
  --wc-topic-nature-fg: var(--wc-spy-pond);
  --wc-topic-history-bg: var(--wc-lantern-tint);
  --wc-topic-history-fg: var(--wc-spy-pond);
  --wc-topic-reading-bg: var(--wc-bunsen-tint);
  --wc-topic-reading-fg: var(--wc-spy-pond);

  /* Type */
  --wc-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --wc-font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --wc-font-label: 'Space Mono', ui-monospace, monospace;

  --wc-size-display: 4.5rem;   /* 72 */
  --wc-size-h1: 3rem;          /* 48 */
  --wc-size-h2: 2rem;          /* 32 */
  --wc-size-h3: 1.5rem;        /* 24 */
  --wc-size-body: 1.125rem;    /* 18 */
  --wc-size-small: 0.9375rem;  /* 15 */
  --wc-size-label: 0.8125rem;  /* 13 */

  --wc-leading-body: 1.5;
  --wc-leading-small: 1.45;
  --wc-leading-tight: 1.05;
  --wc-tracking-headline: -0.03em;
  --wc-tracking-label: 0.05em;

  /* Space (4 px base) */
  --wc-space-1: 0.25rem;  /* 4 */
  --wc-space-2: 0.5rem;   /* 8 */
  --wc-space-3: 0.75rem;  /* 12 */
  --wc-space-4: 1rem;     /* 16 */
  --wc-space-6: 1.5rem;   /* 24 */
  --wc-space-8: 2rem;     /* 32 */
  --wc-space-12: 3rem;    /* 48 */
  --wc-space-16: 4rem;    /* 64 */

  /* Shape */
  --wc-radius-input: 12px;
  --wc-radius-card: 18px;
  --wc-radius-panel: 22px;
  --wc-radius-pill: 999px;
  --wc-border-width: 2px;
  --wc-focus-ring: 3px solid var(--wc-focus);
  --wc-focus-offset: 2px;

  /* Layout */
  --wc-content-max: 76rem;     /* 1216 px */
  --wc-reading-max: 42rem;
  --wc-touch-min: 44px;
  --wc-control-height: 48px;

  /* Texture */
  --wc-grid-size: 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wc-bg: var(--wc-night-pond);
    --wc-surface: var(--wc-pond-panel);
    --wc-text: var(--wc-graph-paper);
    --wc-text-muted: var(--wc-mist);
    --wc-border: var(--wc-mist);
    --wc-hairline: #1B3556;
    --wc-link: var(--wc-lantern);
    --wc-link-hover: var(--wc-graph-paper);
    --wc-focus: var(--wc-lantern);
    --wc-topic-math-bg: var(--wc-pond-panel);
    --wc-topic-math-fg: var(--wc-graph-paper);
    --wc-topic-technology-bg: var(--wc-graph-paper);
    --wc-topic-technology-fg: var(--wc-spy-pond);
  }
}