/* ============================================================
   EnVision: Design Tokens
   Brand palette: main #333, medium #b0a498, accent #00a99d
   ============================================================ */

:root {
  /* --- Brand palette --- */
  --main: #333333;
  --medium: #b0a498;
  --brand-accent: var(--accent, #00a99d);

  /* --- Main (charcoal) scale --- */
  --main-50: #f6f6f6;
  --main-100: #ececec;
  --main-200: #d8d8d8;
  --main-300: #b8b8b8;
  --main-400: #8f8f8f;
  --main-500: #666666;
  --main-600: #555555;
  --main-700: #444444;
  --main-800: #333333;
  --main-900: #2a2a2a;
  --main-950: #1f1f1f;

  /* --- Medium (warm stone) scale --- */
  --medium-50: #faf8f6;
  --medium-100: #f3efe9;
  --medium-200: #e8e2da;
  --medium-300: #d4ccc4;
  --medium-400: #c4bab2;
  --medium-500: #b0a498;
  --medium-600: #9a8f84;
  --medium-700: #8a7f74;
  --medium-800: #7a7268;
  --medium-900: #665f56;

  /* --- Accent scale ---
     Derived from the active color theme's accent (see the THEME BRIDGE
     below) so every tint/shade follows the chosen theme. The teal brand
     accent (#00a99d) is only the pre-theme fallback. */
  --accent-50: color-mix(in srgb, var(--accent, #00a99d) 9%, white);
  --accent-100: color-mix(in srgb, var(--accent, #00a99d) 17%, white);
  --accent-200: color-mix(in srgb, var(--accent, #00a99d) 34%, white);
  --accent-300: color-mix(in srgb, var(--accent, #00a99d) 56%, white);
  --accent-400: color-mix(in srgb, var(--accent, #00a99d) 79%, white);
  --accent-500: var(--accent, #00a99d);
  --accent-600: color-mix(in srgb, var(--accent, #00a99d) 86%, black);
  --accent-700: color-mix(in srgb, var(--accent, #00a99d) 73%, black);
  --accent-800: color-mix(in srgb, var(--accent, #00a99d) 60%, black);
  --accent-900: color-mix(in srgb, var(--accent, #00a99d) 47%, black);

  /* --- Derived tones (aliases) --- */
  --wood: #a9744f;
  --wood-light: #caa47a;
  --wood-deep: #8a5c38;
  --olive: #6d7250;
  --olive-deep: #565a3f;
  --sage: #9aa981;
  --sage-muted: #b8c0a8;

  --main-light: var(--main-600);
  --main-soft: var(--main-500);
  --medium-light: var(--medium-300);
  --medium-dark: var(--medium-700);
  --accent-deep: var(--accent-700);
  --accent-soft: var(--accent-100);

  --cream: var(--medium-50);
  --cream-2: #faf9f7;
  --sand: var(--medium-200);
  --sand-2: #ddd6ce;
  --clay: var(--medium-500);
  --clay-deep: var(--medium-800);
  --terracotta: var(--medium-500);
  --terracotta-deep: var(--medium-800);
  --sage-2: var(--sage-muted);
  --teal: var(--accent-500);
  --teal-deep: var(--accent-700);
  --charcoal: var(--main-800);
  --charcoal-2: var(--main-900);
  --ink: var(--main-800);

  /* --- Typography --- */
  --font-avant: "ITC Avant Garde Gothic Book", "ITC Avant Garde Gothic", "ITC Avant Garde Gothic Std", "AvantGarde-Book", "TeXGyre Adventor", "Century Gothic", "Apple Gothic", sans-serif;
  --font-display: var(--font-avant);
  --font-body: var(--font-avant);
  --font-hand: "Caveat", "Patrick Hand", "Segoe Print", "Comic Sans MS", cursive;
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* --- Radii (unified UI corners — moderate, not too round) --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 10px;
  --r-lg: 10px;
  --r-xl: 10px;
  --r-pill: 999px;

  /* --- Spacing scale --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* --- Layout --- */
  --topbar-h: 68px;
  --maxw: 1200px;

  color-scheme: light;
}

/* ============================================================
   THEME BRIDGE — one theming system for the whole site.

   The marketing site and the app share ONE source of truth: the color
   themes stored in the database (see api migration 009). The theme engine
   applies the chosen theme's base tokens (--bg, --text, --accent,
   --bg-raised, --bg-panel, --border, --text-dim, --scrim, ...) onto
   :root[data-resolved-theme='<slug>'] (see engine/styles/theme.css + the
   API-generated /api/themes/css). Below we DERIVE the public site's richer
   token vocabulary from those shared base tokens, so any theme colors both
   the site and the app identically. The only difference is that the public
   theme picker exposes two themes (Paper / Ink) while the app exposes all.

   Scheme-only accents are keyed on [data-color-scheme="dark"] /
   :root:not([data-color-scheme="dark"]); the shared header mirrors the resolved
   color scheme onto data-theme so those element rules keep working.
   ============================================================ */
:root {
  /* --- Backgrounds & surfaces (from the theme's bg ramp) --- */
  --bg-2: var(--bg-inset);
  --bg-3: var(--bg-raised);
  --bg-4: var(--bg-hover);
  --surface: var(--bg-raised);
  --surface-2: var(--bg-panel);
  --surface-3: var(--bg-hover);
  --surface-4: var(--bg-active);
  --surface-inset: var(--bg-inset);
  --elevated: var(--bg-raised);

  /* --- Text (from the theme's text ramp) --- */
  --text-2: var(--text-dim);
  --text-3: var(--text-faint);
  --text-inv: var(--accent-text);

  /* --- Lines / borders --- */
  --line: var(--border);
  --line-2: color-mix(in srgb, var(--border) 50%, var(--border-strong));
  --line-strong: var(--border-strong);
  --line-subtle: color-mix(in srgb, var(--border) 45%, transparent);

  /* --- Accent family (all keyed off the theme accent) --- */
  --accent-deep: var(--accent-press);
  --accent-muted: color-mix(in srgb, var(--accent) 14%, var(--bg));
  --accent-2: var(--accent-hover);
  --accent-2-deep: var(--accent-press);
  --accent-2-soft: var(--accent-soft);
  --accent-3: var(--text-dim);
  --accent-3-soft: color-mix(in srgb, var(--text-dim) 10%, var(--bg));
  --clay-t: var(--accent-hover);
  --sage-t: var(--accent);

  /* --- Effects --- */
  --highlight: color-mix(in srgb, var(--text) 6%, transparent);
  --shade: color-mix(in srgb, var(--text) 6%, transparent);
  --rim: var(--border);
  --tint-warm: color-mix(in srgb, var(--accent) 12%, transparent);
  --tint-cool: color-mix(in srgb, var(--accent) 9%, transparent);

  /* --- Status (shared with the app palette from theme.css) --- */
  --ok: var(--success);
  --warn: var(--warning);
  --info: var(--accent);

  /* --shadow-1 / --shadow-2 come straight from the theme; larger + inset derive */
  --shadow-3: 0 16px 36px -10px var(--scrim);
  --shadow-4: 0 30px 64px -18px var(--scrim);
  --shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);

  --glow-accent: 0 8px 28px -6px color-mix(in srgb, var(--accent) 30%, transparent);
  --glow-warm: 0 10px 28px -10px color-mix(in srgb, var(--accent) 22%, transparent);
  --paper-tint: transparent;

  /* --- Glass --- */
  --glass-blur: blur(12px) saturate(1.3);
  --glass-bg: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--bg-raised) 96%, transparent);
  --glass-border: var(--border);
  --glass-shine: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  --glass-shadow: var(--shadow-2);

  /* --- Hero grid (from the theme's canvas tokens) --- */
  --hero-grid-bg: var(--canvas-bg);
  --hero-grid-tone: var(--canvas-grid-major);

  /* --- Theme-toggle control --- */
  --theme-toggle-bg: var(--bg-raised);
  --theme-toggle-fg: var(--text-dim);
  --theme-toggle-border: var(--border);
  --theme-toggle-hover-bg: var(--accent-soft);
  --theme-toggle-hover-fg: var(--accent);
  --theme-toggle-hover-border: var(--accent);

  --eyebrow-color: var(--accent);
}

/* Light-scheme-only sheen (paper-like top highlight). */
:root:not([data-color-scheme="dark"]) {
  --highlight: rgba(255, 255, 255, 0.9);
  --shade: rgba(0, 0, 0, 0.05);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* Dark-scheme-only glow / depth. */
[data-color-scheme="dark"] {
  --highlight: color-mix(in srgb, var(--accent) 12%, transparent);
  --shade: color-mix(in srgb, black 32%, transparent);
  --paper-tint: color-mix(in srgb, var(--accent) 4%, transparent);
  --glass-blur: blur(16px) saturate(1.6);
  --glass-bg: color-mix(in srgb, var(--bg-raised) 55%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--bg-panel) 66%, transparent);
  --glass-shine: inset 0 1px 0 color-mix(in srgb, var(--accent) 14%, transparent);
  --glass-shadow: 0 4px 20px -6px color-mix(in srgb, black 50%, transparent), var(--glass-shine);
  --shadow-inset: inset 0 1px 0 var(--highlight), inset 0 -1px 0 var(--shade);
  --glow-accent: 0 8px 36px -6px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Accent utility swatches */
:root {
  --sw-cream: var(--medium-50);
  --sw-sand: var(--medium-200);
  --sw-clay: var(--medium-500);
  --sw-terracotta: var(--medium-600);
  --sw-olive: var(--olive);
  --sw-sage: var(--sage);
  --sw-wood: var(--wood);
  --sw-teal: var(--accent-500);
  --sw-charcoal: var(--main-800);
  --brand-accent: var(--accent-500);
}