/* Design tokens — semantic colours. Generated pass, 2026-07-09.
   Pure refactor: values preserved; near-dups collapsed (see handoff).
   Loaded first on every page so var(--*) resolves everywhere. */
:root {

  /* Brand green */
  --brand: #4caf50;
  --brand-strong: #43a047;
  --brand-hover: #388e3c;
  --brand-dark: #2e7d32;
  --brand-darker: #1b5e20;
  --brand-tint: #e8f5e9;
  --brand-tint-2: #c8e6c9;
  --brand-tint-3: #a5d6a7;
  --brand-wash: #f0faf0;

  /* Premium purple */
  --premium: #9370db;
  --premium-strong: #663399;
  --premium-tint: #e6e6fa;
  --premium-tint-2: #ede7f6;
  --premium-wash: #f3eeff;
  --premium-soft: #e0d4f5;

  /* Acorn gold / orange */
  --acorn: #ff9800;
  --acorn-strong: #f57c00;
  --acorn-gold: #ffc107;
  --acorn-text: #856404;
  --acorn-wash: #fff3cd;

  /* Danger red / accent */
  --danger: #d32f2f;
  --danger-bright: #f44336;
  --danger-dark: #c62828;
  --accent: #e4002b;

  /* Neutrals — surfaces / lines / ink */
  --surface: #ffffff;
  --surface-1: #fafafa;
  --surface-2: #f5f5f5;
  --surface-3: #f0f0f0;
  --line-1: #eeeeee;
  --line-2: #e0e0e0;
  --line-3: #dddddd;
  --line-4: #cccccc;
  --line-5: #bbbbbb;
  --ink-1: #aaaaaa;
  --ink-2: #999999;
  --ink-3: #888888;
  --ink-4: #777777;
  --ink-5: #666666;
  --ink-6: #555555;
  --ink-7: #444444;
  --ink: #333333;
  --ink-black: #000000;

  /* Shadows (drop shadows / elevation) */
  --shadow-weak: rgba(0,0,0,0.1);
  --shadow: rgba(0,0,0,0.15);
  --shadow-md: rgba(0,0,0,0.2);
  --shadow-strong: rgba(0,0,0,0.3);
  --shadow-heavy: rgba(0,0,0,0.5);

  /* Scrims (modal / overlay backdrops). Distinct from drop shadows: these are
     the dim behind dialogs, and their depth is perceptible, so they are NOT
     folded into --shadow-heavy (0.5). Values preserve the pre-refactor dims. */
  --scrim-soft: rgba(0,0,0,0.6);
  --scrim: rgba(0,0,0,0.7);
  --scrim-strong: rgba(0,0,0,0.85);

  /* Chrome role tokens — header/toolbar surface + text.
     Default == today's green header / white text (no visual change). */
  --chrome-bg: var(--brand);
  --chrome-fg: var(--surface);
  --chrome-icon: var(--brand);   /* header action glyphs */
  --chrome-menu-bg: var(--brand-hover);  /* hamburger slide-down panel (today #388e3c) */
  --chrome-hover: var(--brand-dark);      /* hamburger button hover (today #2e7d32) */
  --badge-bg: #ff4081;                    /* nav "New" pill (today hot-pink) */

  /* Tool role tokens — secondary tool controls (zoom pad, action row).
     Default == today's green tool buttons (no visual change). */
  --tool-bg: var(--brand);
  --tool-fg: var(--surface);
  --tool-hover: var(--brand-strong);  /* tool button hover (default green) */

  /* App base surface (editor). Default white == today (no change);
     warm fills it so the left panel stops reading as bright white. */
  --app-bg: var(--surface);
  /* Selected/active fill ring. Default black == today; warm -> cranberry. */
  --select-ring: var(--ink-black);
  /* Decorative accent (modal titles, active tab, accent bars, in-content links).
     Default == green (today, unchanged); warm hands these to cranberry so green
     is left for actions only and the cranberry actually shows up. */
  --ui-accent: var(--brand);

  /* Toast notification backgrounds (info/success/error). Resolved via var()
     in the inline toast style (src/client/toast.ts), so they follow the theme.
     Default values preserve the pre-token toast gradients exactly. */
  --toast-info:    linear-gradient(135deg, #5b7fff, #3b5ccc);
  --toast-success: linear-gradient(135deg, #34c759, #248a3d);
  --toast-error:   linear-gradient(135deg, #ff6b6b, #d63031);
}

/* ============================================================
   WARM THEME SPIKE  ·  :root[data-theme="warm"]
   The "one move": green gets one job (primary action), surfaces
   warm to cream/paper, a cranberry accent joins; premium stays
   purple. Override VALUES only — no layout/markup change.
   Toggle live with ?theme=warm (persists via localStorage).
   Direction from colour-spike-preview.html. Hues = starting point.
   ============================================================ */
:root[data-theme="warm"] {
  /* Surfaces — cool white -> cream/paper */
  --surface:   #fffdf8;
  --surface-1: #faf6ee;
  --surface-2: #f5eee1;   /* canvas / sunken panels */
  --surface-3: #ece1cd;

  /* Lines — warm */
  --line-1: #efe7d7;
  --line-2: #e8dfcc;
  --line-3: #ded1b9;
  --line-4: #cdbfa3;
  --line-5: #bbab8d;

  /* Ink — warm near-blacks / greys */
  --ink:   #2a241d;
  --ink-7: #3b342b;
  --ink-6: #554b3f;
  --ink-5: #675c4e;
  --ink-4: #857a68;
  --ink-3: #978b78;
  --ink-2: #a89c88;
  --ink-1: #b9ad98;

  /* Green — deeper, and now the ONLY green: primary action */
  --brand:        #2d7d46;
  --brand-strong: #276b3c;
  --brand-hover:  #276b3c;
  --brand-dark:   #1f5a31;
  --brand-darker: #164023;
  --brand-tint:   #e4efe4;

  /* Chrome — warm paper header, ink-green text (green leaves the chrome) */
  --chrome-bg: #f4ead6;
  --chrome-fg: #2d4a3a;
  --chrome-icon: #2d4a3a;   /* header glyphs go ink, not green */
  --chrome-menu-bg: #ede2cd;  /* hamburger panel: paper, a touch deeper than the bar */
  --chrome-hover: #e6dabf;     /* hamburger button hover: warm tan, no green flash */
  --badge-bg: var(--accent);   /* "New" pill picks up the cranberry accent */

  /* Tools — warm-neutral tiles, brown glyph (green leaves the tools) */
  --tool-bg: #efe6d3;
  --tool-fg: #5c4a2e;
  --tool-hover: #ddceb0;  /* darker tan on hover — no more green flash */

  /* Accent — cranberry joins in (active fill, highlights) */
  --accent: #8f2233;

  /* App base warms to cream (kills the bright-white left panel) */
  --app-bg: #faf6ee;
  /* Cranberry finally gets a job: the selected-fill ring + decorative accents */
  --select-ring: var(--accent);
  --ui-accent: var(--accent);   /* modal titles, active tab, accent bars, links */

  /* Premium purple → warm plum (committed 2026-07-10): harmonizes with the cozy
     cream palette better than cool mediumpurple, while still reading premium. */
  --premium: #7d5296;
  --premium-strong: #5e3d73;
  --premium-tint: #ece4ef;

  /* Toasts warm up: cool blue info -> cocoa, greens/reds deepen to the warm
     brand + cranberry so nothing reads cool on cream. White text still passes. */
  --toast-info:    linear-gradient(135deg, #8a6d4b, #5f4a30);
  --toast-success: linear-gradient(135deg, #2d7d46, #1f5a31);
  --toast-error:   linear-gradient(135deg, #a5384a, #8f2233);
}

/* Base surface on EVERY page (editor + gallery/materials/account/...).
   Default --app-bg is white, so the default theme is unchanged; warm fills
   the page base so it stops reading as bright white behind cards/panels. */
body { background-color: var(--app-bg); }

/* Warm only: soften default browser-black text to warm ink, app-wide.
   (Default theme keeps its current text colour — no change.) */
:root[data-theme="warm"] body { color: var(--ink); }