/* =========================================================================
 * Case Label Maker — theme tokens, fonts, and the shadcn/Basecoat bridge.
 *
 * TWO token systems live here, side by side and ADDITIVE:
 *
 *   1. The app's own tokens (the 12 palettes below) — surfaces, text, brand,
 *      status, bubbles, hints. Every page's CSS resolves to these. Legacy pages
 *      keep working unchanged mid-migration.
 *        surfaces  --bg --panel --panel2 --panel-raised --input-bg
 *        structure --line --hover --active-bg
 *        text      --ink --muted --label
 *        brand     --accent --accent-ink --action --action-ink
 *        bubbles   --in-bubble --out-bubble --out-ink --out-ink-dim
 *        status    --ok-* --warn-* --err --dot-muted
 *        hints     --wholesale-* --retail-*
 *        effects   --shadow --focus-ring
 *
 *   2. The shadcn/Basecoat variable set (--background --foreground --card
 *      --primary --secondary --muted --accent --destructive --border --input
 *      --ring --radius ...) that the Basecoat component layer consumes. It is
 *      DERIVED from each palette's own tokens by the single bridge block below,
 *      which resolves lazily: `--background: var(--bg)` re-reads whichever --bg
 *      the active theme cascaded, so all 12 themes emit the full shadcn set
 *      without repeating it. The two hero themes (gruvbox, default) additionally
 *      hand-tune a few bridge tokens inside their own blocks.
 *
 *   NAME COLLISIONS (two tokens whose shadcn meaning differs from ours):
 *     - our --accent is the BRAND color; shadcn --accent is a subtle hover
 *       SURFACE. Basecoat reads the surface via `--color-accent`, so the bridge
 *       overrides `--color-accent`/`--color-accent-foreground` and leaves our
 *       bare --accent (brand) untouched.
 *     - our --muted is muted TEXT; shadcn --muted is a SURFACE. Same treatment:
 *       the bridge overrides `--color-muted` to a surface and maps
 *       `--muted-foreground`/`--color-muted-foreground` to our muted text.
 *
 * GRUVBOX is the hero and the default (html with no data-theme = gruvbox). The
 * original Body Nutrition light palette stays available as data-theme="default".
 *
 * The LABEL CANVAS and proof images are deliberately NOT themed — a label is
 * physically white paper (see style.css .cv-* / .card-thumb).
 * ========================================================================= */

/* ---- IBM Plex, self-hosted (latin subsets), font-display:swap ---- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* ---- Global, theme-independent tokens: fonts, type scale, motion, radius ---- *
 * Overrides Basecoat's Geist defaults so every component inherits Plex. These
 * do not change between palettes, so they live once here. Motion/radius/shadow
 * design tokens are documented in style.css (the page-agent contract). */
:root {
  /* Basecoat reads these for --default-font-family / .btn / inputs / toasts. */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono",
               Menlo, Consolas, monospace;

  /* Deliberate type scale, bumped ~10% (2026-07-20, client "squinting"):
     was 11 / 12.5 / 14 / 16 / 20 / 26. */
  --fs-eyebrow: 12px; --fs-xs: 13.5px; --fs-sm: 15.5px;
  --fs-base: 17.5px;  --fs-lg: 22px;   --fs-xl: 28.5px;

  /* Motion — subtle-premium (120–220ms). */
  --dur-1: 120ms; --dur-2: 160ms; --dur-3: 220ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.28, .52, 1);

  /* Radius scale. Basecoat derives --radius-sm = calc(--radius - 4px). */
  --radius: 10px; --radius-sm: 7px; --radius-lg: 14px; --radius-pill: 999px;

  /* Brand mark accent — the warm amber barcode bars in the wordmark icon.
     Held constant across themes so the identity is stable; the tag outline
     uses currentColor and adapts. */
  --clm-mark: #dca23a;
}

/* ---- shadcn / Basecoat bridge (one block; resolves per active theme) ---- */
:root {
  --background: var(--bg);
  --foreground: var(--ink);
  --card: var(--panel);
  --card-foreground: var(--ink);
  --popover: var(--panel-raised);
  --popover-foreground: var(--ink);
  --primary: var(--accent);
  --primary-foreground: var(--accent-ink);
  --secondary: var(--panel2);
  --secondary-foreground: var(--ink);
  --accent-foreground: var(--ink);      /* shadcn accent-surface text (no clash) */
  --muted-foreground: var(--muted);     /* shadcn muted TEXT (no clash) */
  --destructive: var(--err);
  --destructive-foreground: #fff;
  --border: var(--line);
  --input: var(--line);                 /* shadcn --input = input BORDER color */
  --ring: var(--accent);
  /* The ONE primary-action fill (Build / Print / Save / Unlock). Defaults to
     each theme's --action; a theme may override for a confident, on-palette
     button. Unifying every primary CTA on this fixes the split where Build was
     one color and Print/Save another. */
  --cta: var(--action);
  --cta-ink: var(--action-ink);

  /* Collision overrides: give Basecoat correct SURFACES without touching our
     bare --accent (brand) / --muted (text) that legacy CSS depends on. */
  --color-muted: var(--panel2);
  --color-muted-foreground: var(--muted);
  --color-accent: var(--hover);
  --color-accent-foreground: var(--ink);
}

/* ======================================================================= *
 *  HERO — Gruvbox (dark). The default when no data-theme is set. Tuned by
 *  hand to flagship quality: warm engineered darks, ivory ink, aqua brand,
 *  lime CTA, gold as the mark. Contrast checked (see report).
 * ======================================================================= */
:root,
html[data-theme="gruvbox"] {
  color-scheme: dark;
  --bg: #22201e; --panel: #302d2a; --panel2: #3a3531; --panel-raised: #37332f; --input-bg: #2a2724;
  --line: #4b453d; --hover: #38342f; --active-bg: #37402f;
  --ink: #f1e5c5; --muted: #b3a288; --label: #cbb994;
  --accent: #8fbcae; --accent-ink: #1d1b19; --action: #b8bb26; --action-ink: #23200e;
  --in-bubble: #3a3531; --out-bubble: #458588; --out-ink: #f2ead5; --out-ink-dim: rgba(242,234,213,.74);
  --ok-bg: #333d1c; --ok-ink: #cdd549; --ok-line: #4d5522;
  --warn: #e0a83a; --warn-ink: #eec06a; --warn-bg: #3d3320; --warn-line: #58482a;
  --err: #fb4934; --dot-muted: #7c6f64;
  --wholesale-bg: #3f3550; --wholesale-ink: #d3869b; --retail-bg: #21414a; --retail-ink: #8fbcae;
  /* Focus ring uses the warm CTA amber, not the sage --accent, so the
     interactive-focus color and the primary-action color are one system. */
  --shadow: rgba(0,0,0,.48); --focus-ring: rgba(227,167,47,.40);
  /* hero bridge overrides */
  --destructive: #cc4433; --destructive-foreground: #fdf0ee;
  /* Confident warm-gold primary CTA: reads unmistakably enabled on the warm
     dark (the pale sage --accent read as disabled), ties to the wordmark amber,
     and isn't the neon lime --action that looked garish as a full-width fill. */
  --cta: #e3a72f; --cta-ink: #241a06;
}

/* ======================================================================= *
 *  Body Nutrition — the original light palette (polished second). Available
 *  in the picker as "Body Nutrition"; selected via data-theme="default".
 * ======================================================================= */
html[data-theme="default"] {
  color-scheme: light;
  --bg: #f4f6f8; --panel: #ffffff; --panel2: #eef1f5; --panel-raised: #ffffff; --input-bg: #ffffff;
  --line: #e0e4ea; --hover: #eef3f1; --active-bg: #e4f3ec;
  --ink: #16202c; --muted: #5f6b7a; --label: #7c8797;
  --accent: #0f6b5a; --accent-ink: #ffffff; --action: #0d7a3d; --action-ink: #ffffff;
  --in-bubble: #eef1f5; --out-bubble: #0f6b5a; --out-ink: #ffffff; --out-ink-dim: rgba(255,255,255,.82);
  --ok-bg: #e4f3ea; --ok-ink: #0b6234; --ok-line: #bfe0cd;
  --warn: #b9740f; --warn-ink: #7a4d0a; --warn-bg: #fdf1dd; --warn-line: #f0d6a6;
  --err: #b3242c; --dot-muted: #b8bfc8;
  --wholesale-bg: #ece3fb; --wholesale-ink: #5b2ca6; --retail-bg: #e6f0f4; --retail-ink: #2c6a86;
  --shadow: rgba(20,30,45,.08); --focus-ring: rgba(15,107,90,.24);
  --destructive: #b3242c; --destructive-foreground: #ffffff;
}

/* iMessage — Apple Messages: white thread, gray in-bubbles, blue out-bubbles */
html[data-theme="imessage"] {
  color-scheme: light;
  --bg: #ffffff; --panel: #f5f5f7; --panel2: #e9e9eb; --panel-raised: #fafafa; --input-bg: #ffffff;
  --line: #d1d1d6; --hover: #ececf0; --active-bg: #d8e9fd;
  --ink: #1c1c1e; --muted: #8e8e93; --label: #8e8e93;
  --accent: #007aff; --accent-ink: #ffffff; --action: #34c759; --action-ink: #ffffff;
  --in-bubble: #e9e9eb; --out-bubble: #0b93f6; --out-ink: #ffffff; --out-ink-dim: rgba(255,255,255,.85);
  --ok-bg: #e4f8ea; --ok-ink: #1e7d3c; --ok-line: #bfe9cc;
  --warn: #ff9500; --warn-ink: #9a5b00; --warn-bg: #fff3e0; --warn-line: #ffd9a8;
  --err: #ff3b30; --dot-muted: #c7c7cc;
  --wholesale-bg: #efe5fd; --wholesale-ink: #5e2ca5; --retail-bg: #e1f0ff; --retail-ink: #0a66c2;
  --shadow: rgba(0,0,0,.08); --focus-ring: rgba(0,122,255,.25);
}

/* Solarized Light */
html[data-theme="solarized-light"] {
  color-scheme: light;
  --bg: #fdf6e3; --panel: #fbf2dd; --panel2: #eee8d5; --panel-raised: #f7efd5; --input-bg: #fffbf0;
  --line: #e5dcc0; --hover: #f0ead7; --active-bg: #daf0ec;
  --ink: #586e75; --muted: #93a1a1; --label: #93a1a1;
  --accent: #2aa198; --accent-ink: #fdf6e3; --action: #859900; --action-ink: #fdf6e3;
  --in-bubble: #eee8d5; --out-bubble: #2aa198; --out-ink: #fdf6e3; --out-ink-dim: rgba(253,246,227,.85);
  --ok-bg: #e6ecd6; --ok-ink: #5a6a00; --ok-line: #cdd9b0;
  --warn: #b58900; --warn-ink: #7a5c00; --warn-bg: #f4eccf; --warn-line: #e6d9a8;
  --err: #dc322f; --dot-muted: #b7bda8;
  --wholesale-bg: #e8dfef; --wholesale-ink: #6c3fa0; --retail-bg: #dde9ee; --retail-ink: #2c6a86;
  --shadow: rgba(101,123,131,.14); --focus-ring: rgba(42,161,152,.28);
}

/* Catppuccin Latte */
html[data-theme="catppuccin-latte"] {
  color-scheme: light;
  --bg: #eff1f5; --panel: #ffffff; --panel2: #e6e9ef; --panel-raised: #f5f6f9; --input-bg: #ffffff;
  --line: #dce0e8; --hover: #e6e9ef; --active-bg: #dce7fb;
  --ink: #4c4f69; --muted: #8c8fa1; --label: #8c8fa1;
  --accent: #1e66f5; --accent-ink: #ffffff; --action: #40a02b; --action-ink: #ffffff;
  --in-bubble: #e6e9ef; --out-bubble: #1e66f5; --out-ink: #ffffff; --out-ink-dim: rgba(255,255,255,.85);
  --ok-bg: #e3efe0; --ok-ink: #2f7d1e; --ok-line: #c3e0bb;
  --warn: #df8e1d; --warn-ink: #9c6212; --warn-bg: #f8ecd6; --warn-line: #eed9b0;
  --err: #d20f39; --dot-muted: #bcc0cc;
  --wholesale-bg: #e9e1fb; --wholesale-ink: #8839ef; --retail-bg: #dde9f6; --retail-ink: #1e66f5;
  --shadow: rgba(76,79,105,.10); --focus-ring: rgba(30,102,245,.24);
}

/* Dawnfox — nightfox.nvim light variant (rosé pine dawn lineage) */
html[data-theme="dawnfox"] {
  color-scheme: light;
  --bg: #faf4ed; --panel: #f4ede8; --panel2: #ebe0df; --panel-raised: #f7f1ea; --input-bg: #fffaf3;
  --line: #e0d8cd; --hover: #efe6dd; --active-bg: #d0d8d8;
  --ink: #575279; --muted: #9893a5; --label: #a8a3b3;
  --accent: #286983; --accent-ink: #faf4ed; --action: #618774; --action-ink: #faf4ed;
  --in-bubble: #ebe0df; --out-bubble: #286983; --out-ink: #faf4ed; --out-ink-dim: rgba(250,244,237,.85);
  --ok-bg: #e2eae4; --ok-ink: #4a6b59; --ok-line: #c6d6ca;
  --warn: #ea9d34; --warn-ink: #a26a15; --warn-bg: #f7ead6; --warn-line: #ecd5ac;
  --err: #b4637a; --dot-muted: #bdbfc9;
  --wholesale-bg: #e7ddef; --wholesale-ink: #6d5694; --retail-bg: #dbe7ec; --retail-ink: #286983;
  --shadow: rgba(87,82,121,.12); --focus-ring: rgba(40,105,131,.25);
}

/* Kanagawa Dragon (dark) */
html[data-theme="kanagawa-dragon"] {
  color-scheme: dark;
  --bg: #181616; --panel: #1d1c19; --panel2: #282727; --panel-raised: #201f1c; --input-bg: #282727;
  --line: #393836; --hover: #282727; --active-bg: #2d3d43;
  --ink: #c5c9c5; --muted: #a6a69c; --label: #8ea4a2;
  --accent: #8ba4b0; --accent-ink: #181616; --action: #87a987; --action-ink: #181616;
  --in-bubble: #282727; --out-bubble: #2d4f67; --out-ink: #e6e9e6; --out-ink-dim: rgba(230,233,230,.72);
  --ok-bg: #2b3a2e; --ok-ink: #b3d0a8; --ok-line: #3f5540;
  --warn: #c4b28a; --warn-ink: #d3c4a0; --warn-bg: #34301f; --warn-line: #4a442e;
  --err: #c4746e; --dot-muted: #625f5a;
  --wholesale-bg: #34304a; --wholesale-ink: #b8a5d8; --retail-bg: #24343d; --retail-ink: #97c7d6;
  --shadow: rgba(0,0,0,.40); --focus-ring: rgba(139,164,176,.34);
}

/* Tokyo Night (dark) */
html[data-theme="tokyonight"] {
  color-scheme: dark;
  --bg: #1a1b26; --panel: #16161e; --panel2: #24283b; --panel-raised: #1c1d2b; --input-bg: #24283b;
  --line: #2f3549; --hover: #24283b; --active-bg: #283457;
  --ink: #c0caf5; --muted: #7982b0; --label: #7aa2f7;
  --accent: #7aa2f7; --accent-ink: #1a1b26; --action: #9ece6a; --action-ink: #16161e;
  --in-bubble: #24283b; --out-bubble: #3d59a1; --out-ink: #eef1ff; --out-ink-dim: rgba(238,241,255,.72);
  --ok-bg: #26352a; --ok-ink: #b6e08b; --ok-line: #3a5140;
  --warn: #e0af68; --warn-ink: #e6bd82; --warn-bg: #35301f; --warn-line: #4c442e;
  --err: #f7768e; --dot-muted: #565f89;
  --wholesale-bg: #322a53; --wholesale-ink: #bb9af7; --retail-bg: #1f2f4d; --retail-ink: #7dcfff;
  --shadow: rgba(0,0,0,.45); --focus-ring: rgba(122,162,247,.34);
}

/* Nightfox — nightfox.nvim flagship (dark) */
html[data-theme="nightfox"] {
  color-scheme: dark;
  --bg: #192330; --panel: #131a24; --panel2: #212e3f; --panel-raised: #1c2735; --input-bg: #212e3f;
  --line: #29394f; --hover: #212e3f; --active-bg: #2b3b51;
  --ink: #cdcecf; --muted: #738091; --label: #71839b;
  --accent: #719cd6; --accent-ink: #131a24; --action: #81b29a; --action-ink: #131a24;
  --in-bubble: #212e3f; --out-bubble: #3c5372; --out-ink: #e8eaec; --out-ink-dim: rgba(232,234,236,.72);
  --ok-bg: #263a31; --ok-ink: #a3cbb5; --ok-line: #35543f;
  --warn: #dbc074; --warn-ink: #e0ca87; --warn-bg: #33301f; --warn-line: #4a4429;
  --err: #c94f6d; --dot-muted: #575c66;
  --wholesale-bg: #332c4d; --wholesale-ink: #c2a6ec; --retail-bg: #1e3345; --retail-ink: #8cc5e8;
  --shadow: rgba(0,0,0,.42); --focus-ring: rgba(113,156,214,.34);
}

/* Terafox — nightfox.nvim teal-sea variant (dark) */
html[data-theme="terafox"] {
  color-scheme: dark;
  --bg: #152528; --panel: #0f1c1e; --panel2: #1d3337; --panel-raised: #17282b; --input-bg: #1d3337;
  --line: #254147; --hover: #1d3337; --active-bg: #293e40;
  --ink: #e6eaea; --muted: #6d7f8b; --label: #587b7b;
  --accent: #5a93aa; --accent-ink: #0f1c1e; --action: #7aa4a1; --action-ink: #0f1c1e;
  --in-bubble: #1d3337; --out-bubble: #4d7d90; --out-ink: #eff3f3; --out-ink-dim: rgba(239,243,243,.75);
  --ok-bg: #243937; --ok-ink: #a3c6c3; --ok-line: #35524f;
  --warn: #fda47f; --warn-ink: #fdb292; --warn-bg: #37281f; --warn-line: #503a2c;
  --err: #e85c51; --dot-muted: #425e5e;
  --wholesale-bg: #3a2e40; --wholesale-ink: #d8a5c4; --retail-bg: #1c3a44; --retail-ink: #a1cdd8;
  --shadow: rgba(0,0,0,.45); --focus-ring: rgba(90,147,170,.34);
}

/* Carbonfox — nightfox.nvim IBM Carbon variant (dark) */
html[data-theme="carbonfox"] {
  color-scheme: dark;
  --bg: #161616; --panel: #0f0f0f; --panel2: #252525; --panel-raised: #1a1a1a; --input-bg: #252525;
  --line: #2d2d2d; --hover: #1f1f1f; --active-bg: #2a2a2a;
  --ink: #f2f4f8; --muted: #8b8c8e; --label: #7b7c7e;
  --accent: #78a9ff; --accent-ink: #0c0c0c; --action: #25be6a; --action-ink: #0c0c0c;
  --in-bubble: #252525; --out-bubble: #33507a; --out-ink: #f2f4f8; --out-ink-dim: rgba(242,244,248,.72);
  --ok-bg: #16321f; --ok-ink: #57d68d; --ok-line: #23533a;
  --warn: #f1c21b; --warn-ink: #e3b715; --warn-bg: #33290f; --warn-line: #4d3f18;
  --err: #ee5396; --dot-muted: #525253;
  --wholesale-bg: #322a4d; --wholesale-ink: #be95ff; --retail-bg: #16324d; --retail-ink: #33b1ff;
  --shadow: rgba(0,0,0,.50); --focus-ring: rgba(120,169,255,.34);
}

/* Sobrio — elvessousa/sobrio, sober minimal dark */
html[data-theme="sobrio"] {
  color-scheme: dark;
  --bg: #121212; --panel: #181818; --panel2: #262626; --panel-raised: #161616; --input-bg: #1e1e1e;
  --line: #303030; --hover: #1c1c1c; --active-bg: #2a2a2a;
  --ink: #e8e8e8; --muted: #9a9a9a; --label: #808080;
  --accent: #87afd7; --accent-ink: #121212; --action: #2ec27e; --action-ink: #121212;
  --in-bubble: #262626; --out-bubble: #2f4e68; --out-ink: #f0f0f0; --out-ink-dim: rgba(240,240,240,.72);
  --ok-bg: #17362a; --ok-ink: #6fd6a8; --ok-line: #245743;
  --warn: #d7af87; --warn-ink: #dcba97; --warn-bg: #322a1e; --warn-line: #4a3f2c;
  --err: #fd6389; --dot-muted: #5f5f5f;
  --wholesale-bg: #34304a; --wholesale-ink: #d7d7ff; --retail-bg: #1d3442; --retail-ink: #7cdce7;
  --shadow: rgba(0,0,0,.50); --focus-ring: rgba(135,175,215,.30);
}