/*
 * THEME TOKENS — the only file to edit to reskin the app.
 * Default skin: "by Wallcovering Solutions".
 * Colors sampled from "Wallcovering Solutions LLC - Portfolio 2026.pdf" (/workspace/bizid):
 *   black ground #0B0B0B · logo gold #E0A840–#F0C868 · bronze accent text #A8865A · cream #F4F1EA · warm gray #9E998F · gem teal #109CB0
 *   Type in the portfolio: Cormorant Garamond (headings) + Jost (body); system fallbacks are used offline.
 * Text pairs are chosen for WCAG AA (≥ 4.5:1 for body text, ≥ 3:1 for large text and UI).
 */
:root {
  --brand-name: "Wallpaper Calculator";
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-base: 17px;
  --radius: 14px;
  --radius-sm: 10px;
  --tap: 52px;

  /* light */
  --bg: #F7F4EE;          /* cream */
  --surface: #FFFFFF;
  --surface-2: #FBF8F2;
  --ink: #1A1714;         /* 16.3:1 on bg */
  --muted: #5B5348;       /* 7.6:1 on white, 6.9:1 on bg */
  --line: #DCD4C6;
  --header-bg: #0B0B0B;   /* portfolio black */
  --header-ink: #F4F1EA;  /* 17.5:1 */
  --header-muted: #C9C2B5;
  --gold: #E0A840;        /* logo gold — fills/large accents only */
  --gold-strong: #C9922E;
  --on-gold: #111111;     /* 8.9:1 on --gold */
  --accent-ink: #7A5A22;  /* bronze text on light: 6.3:1 on white, 5.8:1 on bg */
  --primary: #111111;     /* primary buttons */
  --on-primary: #F4E3B8;  /* 14.9:1 */
  --teal: #0B7F90;        /* gem teal, darkened for text: 4.7:1 on white */
  --ok: #1D7A46;
  --err: #B3261E;
  --warn-bg: #FFF4DC; --warn-ink: #6B4A00;
  --hero-bg: #0B0B0B; --hero-ink: #F4F1EA; --hero-muted: #D4CCBD; --hero-accent: #F0C868;
  --strip-a: #F3E3BD; --strip-b: #DCE9EC; --strip-line: #8A6A2E; --wall-line: #1A1714;
  --focus: #0B7F90;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
}
[data-theme="dark"] {
  --bg: #0F0E0D; --surface: #1B1917; --surface-2: #23201D;
  --ink: #F4F1EA; --muted: #BDB5A7; --line: #3A352F;
  --header-bg: #000000; --header-ink: #F4F1EA; --header-muted: #BDB5A7;
  --accent-ink: #E8BE6A; --primary: #E0A840; --on-primary: #111111;
  --teal: #4FC3D3; --ok: #5CC98A; --err: #FF8A80;
  --warn-bg: #3A2E12; --warn-ink: #F6D88E;
  --hero-bg: #000000; --hero-ink: #F4F1EA; --hero-muted: #CFC7B8; --hero-accent: #F0C868;
  --strip-a: #5A4721; --strip-b: #1F4A52; --strip-line: #E0A840; --wall-line: #F4F1EA;
  --focus: #4FC3D3;
  --shadow: 0 1px 2px rgba(0,0,0,.5);
}