/*
 * BreadBowl design tokens: the one place colors, type and shape are defined.
 *
 * The Next.js app imports this file (src/app/globals.css) and standalone pages in public/
 * (e.g. /blog/breadbowl-embed/) link it directly, so the whole site themes together.
 *
 * Theme selection: <html data-theme="light|dark"> is set before first paint by the inline
 * script in src/app/layout.tsx (and its copy in standalone pages) from localStorage "bb-theme"
 * ("light" | "dark" | "system"). Without JavaScript the OS preference applies via the media
 * query below. The two dark blocks must stay identical (scripts/check-theme.mjs verifies it).
 */

:root {
  color-scheme: light;

  /* type */
  --bb-font-sans: "Manrope Variable", "Manrope BB", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bb-font-serif: "Newsreader Variable", "Newsreader BB", Georgia, "Times New Roman", serif;
  --bb-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* shape */
  --bb-radius-sm: 10px;
  --bb-radius: 20px;
  --bb-radius-lg: 28px;

  /* surfaces */
  --bb-bg: #f1e8dc;            /* page */
  --bb-bg-2: #ebe1d3;          /* recessed band */
  --bb-surface: #faf6ef;       /* cards, paper */
  --bb-surface-2: #f5efe5;     /* raised inside a card */
  --bb-surface-3: #e0e6e1;     /* cool paper */
  --bb-nav: rgba(241, 232, 220, 0.78);
  --bb-tile: #dce6e7;          /* logo tile, soft accent fill */

  /* ink */
  --bb-fg: #292724;            /* headings, primary text */
  --bb-fg-2: #4a453f;          /* secondary text */
  --bb-body: #34302b;          /* long-form body */
  --bb-muted: #6e675f;         /* meta, captions (4.6:1 on page) */
  --bb-faint: #8f877d;         /* decorative labels only */
  --bb-accent: #6f8993;        /* display italics, large text only */
  --bb-on-tile: #59727d;

  /* lines */
  --bb-line: rgba(41, 39, 36, 0.14);
  --bb-line-2: rgba(41, 39, 36, 0.08);
  --bb-wash: rgba(41, 39, 36, 0.05);  /* hover fills, code background */

  /* inverted (primary buttons) */
  --bb-invert: #292724;
  --bb-on-invert: #faf6ef;
  --bb-invert-hover: #3a3632;

  /* interaction */
  --bb-selection: #c6d7dc;
  --bb-focus: #292724;
  --bb-shadow: 0 18px 60px rgba(77, 63, 46, 0.07);
  --bb-shadow-lg: 0 30px 90px rgba(77, 63, 46, 0.12);

  /* data roles: routing / value / cost (validated as a set on --bb-surface;
     routing–value ΔE 16.7 normal vision; value–cost needs labels, which every chart has) */
  --bb-rt: #1f6aa5;
  --bb-rt-ink: #1b5687;
  --bb-rt-soft: #dde8f1;
  --bb-rt-rgb: 31, 106, 165;
  --bb-val: #2f8f6a;
  --bb-val-ink: #22694e;
  --bb-val-soft: #dcede4;
  --bb-val-rgb: 47, 143, 106;
  --bb-cost: #cf6a3d;
  --bb-cost-ink: #a24d26;
  --bb-cost-soft: #f5e1d6;
  --bb-cost-rgb: 207, 106, 61;
  --bb-hl: #ecd38f;
  --bb-hl-soft: #f4e8c6;
  --bb-hl-rgb: 222, 176, 60;
  --bb-neutral-mark: #a59c90;
  --bb-ink-rgb: 41, 39, 36;    /* for rgba() washes in canvas/SVG */
  --bb-surface-rgb: 250, 246, 239;
  --bb-glass-rgb: 255, 255, 255; /* translucent panels over the page */
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bb-bg: #141312;
  --bb-bg-2: #0f0e0d;
  --bb-surface: #1c1b19;
  --bb-surface-2: #232220;
  --bb-surface-3: #1a1f1e;
  --bb-nav: rgba(20, 19, 18, 0.72);
  --bb-tile: #2a3335;
  --bb-fg: #f2ede4;
  --bb-fg-2: #d9d2c6;
  --bb-body: #e4ddd2;
  --bb-muted: #a8a094;
  --bb-faint: #7f786e;
  --bb-accent: #9fb7c0;
  --bb-on-tile: #a9c1c9;
  --bb-line: rgba(242, 237, 228, 0.13);
  --bb-line-2: rgba(242, 237, 228, 0.07);
  --bb-wash: rgba(242, 237, 228, 0.06);
  --bb-invert: #f2ede4;
  --bb-on-invert: #171614;
  --bb-invert-hover: #ffffff;
  --bb-selection: #34505a;
  --bb-focus: #f2ede4;
  --bb-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  --bb-shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.5);
  --bb-rt: #4390d2;
  --bb-rt-ink: #86b9e6;
  --bb-rt-soft: #1c2a37;
  --bb-rt-rgb: 67, 144, 210;
  --bb-val: #2e9f6d;
  --bb-val-ink: #6cc79d;
  --bb-val-soft: #172b23;
  --bb-val-rgb: 46, 159, 109;
  --bb-cost: #d4703f;
  --bb-cost-ink: #eb9a74;
  --bb-cost-soft: #35231a;
  --bb-cost-rgb: 212, 112, 63;
  --bb-hl: #8f7a3a;
  --bb-hl-soft: #2c2616;
  --bb-hl-rgb: 214, 178, 84;
  --bb-neutral-mark: #6f685f;
  --bb-ink-rgb: 242, 237, 228;
  --bb-surface-rgb: 28, 27, 25;
  --bb-glass-rgb: 44, 42, 39;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bb-bg: #141312;
    --bb-bg-2: #0f0e0d;
    --bb-surface: #1c1b19;
    --bb-surface-2: #232220;
    --bb-surface-3: #1a1f1e;
    --bb-nav: rgba(20, 19, 18, 0.72);
    --bb-tile: #2a3335;
    --bb-fg: #f2ede4;
    --bb-fg-2: #d9d2c6;
    --bb-body: #e4ddd2;
    --bb-muted: #a8a094;
    --bb-faint: #7f786e;
    --bb-accent: #9fb7c0;
    --bb-on-tile: #a9c1c9;
    --bb-line: rgba(242, 237, 228, 0.13);
    --bb-line-2: rgba(242, 237, 228, 0.07);
    --bb-wash: rgba(242, 237, 228, 0.06);
    --bb-invert: #f2ede4;
    --bb-on-invert: #171614;
    --bb-invert-hover: #ffffff;
    --bb-selection: #34505a;
    --bb-focus: #f2ede4;
    --bb-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
    --bb-shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.5);
    --bb-rt: #4390d2;
    --bb-rt-ink: #86b9e6;
    --bb-rt-soft: #1c2a37;
    --bb-rt-rgb: 67, 144, 210;
    --bb-val: #2e9f6d;
    --bb-val-ink: #6cc79d;
    --bb-val-soft: #172b23;
    --bb-val-rgb: 46, 159, 109;
    --bb-cost: #d4703f;
    --bb-cost-ink: #eb9a74;
    --bb-cost-soft: #35231a;
    --bb-cost-rgb: 212, 112, 63;
    --bb-hl: #8f7a3a;
    --bb-hl-soft: #2c2616;
    --bb-hl-rgb: 214, 178, 84;
    --bb-neutral-mark: #6f685f;
    --bb-ink-rgb: 242, 237, 228;
    --bb-surface-rgb: 28, 27, 25;
    --bb-glass-rgb: 44, 42, 39;
  }
}