/* VZN Designs v3 — tokens as CSS custom properties.
   For vzndesigns.io, VZN Apply web, and the Command Center static web build.
   Theme: set data-theme="light" | "dark" on <html>. With neither set, the page follows the OS.
   Source of truth: vzn-tokens.json. Keep the two in sync. */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: light;

  /* ---------- colour · light (pale gold ground, black ink, old-gold action) ---------- */
  --vzn-bg: #F2E6C6;
  --vzn-surface: #FBF6E8;
  --vzn-surface-alt: #EADBB2;
  --vzn-text: #141414;
  --vzn-text-soft: #4A4236;
  --vzn-muted: #6B5F45;
  --vzn-line: #E2D3A8;
  --vzn-line-strong: #CDB98A;
  --vzn-accent: #C5A253;
  --vzn-accent-pressed: #B08F42;
  --vzn-accent-text: #141414;
  --vzn-accent-soft: #EEDFB4;
  --vzn-gold: #7A5E16;
  --vzn-gold-fill: #C5A253;
  --vzn-gold-soft: #EEDFB4;
  --vzn-ok: #3A6747;
  --vzn-ok-text: #FBF6E8;
  --vzn-ok-soft: #DDE8D3;
  --vzn-warn: #9A4E30;
  --vzn-warn-soft: #F3DCCB;
  --vzn-danger: #9C3F35;
  --vzn-danger-pressed: #86342B;
  --vzn-danger-text: #FBF6E8;
  --vzn-danger-soft: #F3D9D3;
  --vzn-disabled-bg: #E2D3A8;
  --vzn-disabled-text: #6B5F45;
  --vzn-toggle-off: #D9C792;
  --vzn-toast-bg: #141414;
  --vzn-toast-text: #F2E6C6;
  --vzn-scrim: rgba(11, 11, 10, 0.4);
  --vzn-wordmark: #141414;
  --vzn-focus: #141414;

  /* fixed (same in both themes) */
  --vzn-sidebar-bg: #0B0B0A;
  --vzn-sidebar-text: #C9C4B8;
  --vzn-sidebar-active-bg: #2A2412;
  --vzn-sidebar-active-text: #D4B35A;
  --vzn-project-gold: #C5A253;
  --vzn-project-slate: #5E7A8C;
  --vzn-project-clay: #A4583A;
  --vzn-project-green: #3F6F4F;
  --vzn-project-taupe: #8C7A6B;
  --vzn-project-plum: #7A5C7A;

  /* ---------- elevation ---------- */
  --vzn-elev-card: 0 1px 2px rgba(60, 45, 10, 0.08), 0 4px 14px rgba(60, 45, 10, 0.06);
  --vzn-elev-dialog: 0 2px 6px rgba(60, 45, 10, 0.10), 0 16px 40px rgba(60, 45, 10, 0.18);

  /* ---------- type ---------- */
  --vzn-font-sans: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --vzn-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* app roles, web sizes (phone sizes in the JSON) */
  --vzn-display: 800 36px/44px var(--vzn-font-sans);       /* letter-spacing: -0.6px */
  --vzn-title: 700 22px/28px var(--vzn-font-sans);         /* letter-spacing: -0.3px */
  --vzn-scripture: 400 24px/36px var(--vzn-font-sans);
  --vzn-heading: 700 16px/22px var(--vzn-font-sans);
  --vzn-body: 400 15px/22px var(--vzn-font-sans);
  --vzn-body-small: 400 13px/18px var(--vzn-font-sans);
  --vzn-label: 600 12px/16px var(--vzn-font-sans);         /* letter-spacing: 0.8px; uppercase */
  --vzn-mono: 400 12.5px/18px var(--vzn-font-mono);
  --vzn-ls-display: -0.6px;
  --vzn-ls-title: -0.3px;
  --vzn-ls-label: 0.8px;

  /* marketing roles (vzndesigns.io) */
  --vzn-site-hero: 800 clamp(40px, 7vw, 84px)/1.04 var(--vzn-font-sans);       /* -0.03em */
  --vzn-site-section: 800 clamp(30px, 4vw, 48px)/1.1 var(--vzn-font-sans);     /* -0.02em */
  --vzn-site-lead: 400 clamp(18px, 2vw, 22px)/1.5 var(--vzn-font-sans);
  --vzn-site-body: 400 17px/28px var(--vzn-font-sans);
  --vzn-site-eyebrow: 700 13px/16px var(--vzn-font-sans);                     /* 1.6px; uppercase */
  --vzn-site-card-title: 700 22px/28px var(--vzn-font-sans);

  /* long-form (field notes) */
  --vzn-article-title: 800 clamp(36px, 5vw, 56px)/1.08 var(--vzn-font-sans);  /* -0.025em */
  --vzn-article-dek: 400 22px/34px var(--vzn-font-sans);
  --vzn-article-h2: 800 28px/36px var(--vzn-font-sans);
  --vzn-article-body: 400 19px/32px var(--vzn-font-sans);                      /* 17px/28px under 640px */
  --vzn-article-quote: 700 28px/38px var(--vzn-font-sans);
  --vzn-article-caption: 400 14px/20px var(--vzn-font-sans);
  --vzn-article-measure: 680px;

  /* ---------- space · radius · layout ---------- */
  --vzn-space-1: 4px;
  --vzn-space-2: 8px;
  --vzn-space-3: 12px;
  --vzn-space-4: 16px;
  --vzn-space-5: 24px;
  --vzn-space-6: 32px;
  --vzn-space-7: 48px;
  --vzn-space-8: 64px;
  --vzn-space-9: 96px;
  --vzn-space-10: 120px;
  --vzn-radius-sm: 6px;
  --vzn-radius-md: 10px;
  --vzn-radius-lg: 14px;
  --vzn-control-h: 38px;
  --vzn-control-h-touch: 44px;
  --vzn-gutter: 24px;
  --vzn-site-max: 1200px;
  --vzn-app-max: 1120px;

  /* ---------- motion ---------- */
  --vzn-ease: cubic-bezier(0.2, 0, 0, 1);
  --vzn-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --vzn-dur-fast: 160ms;
  --vzn-dur-base: 200ms;
  --vzn-dur-slow: 240ms;
  --vzn-dur-sheet: 280ms;
}

/* ---------- colour · dark (black ground, warm-white ink, old-gold action) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --vzn-bg: #0B0B0A;
  --vzn-surface: #161513;
  --vzn-surface-alt: #1F1D1A;
  --vzn-text: #F1EEE6;
  --vzn-text-soft: #C9C4B8;
  --vzn-muted: #9A958A;
  --vzn-line: #26241F;
  --vzn-line-strong: #3A372F;
  --vzn-accent: #C5A253;
  --vzn-accent-pressed: #B08F42;
  --vzn-accent-text: #141414;
  --vzn-accent-soft: #2A2412;
  --vzn-gold: #D4B35A;
  --vzn-gold-fill: #C5A253;
  --vzn-gold-soft: #2A2412;
  --vzn-ok: #8CBF9A;
  --vzn-ok-text: #141414;
  --vzn-ok-soft: #1C2A20;
  --vzn-warn: #D49575;
  --vzn-warn-soft: #2E2119;
  --vzn-danger: #D08177;
  --vzn-danger-pressed: #BB6E64;
  --vzn-danger-text: #141414;
  --vzn-danger-soft: #2E1F1D;
  --vzn-disabled-bg: #26241F;
  --vzn-disabled-text: #9A958A;
  --vzn-toggle-off: #3A372F;
  --vzn-toast-bg: #F1EEE6;
  --vzn-toast-text: #141414;
  --vzn-scrim: rgba(0, 0, 0, 0.6);
  --vzn-wordmark: #C5A253;
  --vzn-focus: #D4B35A;
  --vzn-elev-card: 0 0 0 1px #26241F;
  --vzn-elev-dialog: 0 0 0 1px #3A372F, 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* No explicit theme: follow the OS. Mirrors the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --vzn-bg: #0B0B0A;
    --vzn-surface: #161513;
    --vzn-surface-alt: #1F1D1A;
    --vzn-text: #F1EEE6;
    --vzn-text-soft: #C9C4B8;
    --vzn-muted: #9A958A;
    --vzn-line: #26241F;
    --vzn-line-strong: #3A372F;
    --vzn-accent: #C5A253;
    --vzn-accent-pressed: #B08F42;
    --vzn-accent-text: #141414;
    --vzn-accent-soft: #2A2412;
    --vzn-gold: #D4B35A;
    --vzn-gold-fill: #C5A253;
    --vzn-gold-soft: #2A2412;
    --vzn-ok: #8CBF9A;
    --vzn-ok-text: #141414;
    --vzn-ok-soft: #1C2A20;
    --vzn-warn: #D49575;
    --vzn-warn-soft: #2E2119;
    --vzn-danger: #D08177;
    --vzn-danger-pressed: #BB6E64;
    --vzn-danger-text: #141414;
    --vzn-danger-soft: #2E1F1D;
    --vzn-disabled-bg: #26241F;
    --vzn-disabled-text: #9A958A;
    --vzn-toggle-off: #3A372F;
    --vzn-toast-bg: #F1EEE6;
    --vzn-toast-text: #141414;
    --vzn-scrim: rgba(0, 0, 0, 0.6);
    --vzn-wordmark: #C5A253;
    --vzn-focus: #D4B35A;
    --vzn-elev-card: 0 0 0 1px #26241F;
    --vzn-elev-dialog: 0 0 0 1px #3A372F, 0 16px 40px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- base ---------- */
html { background: var(--vzn-bg); color: var(--vzn-text); font: var(--vzn-body); -webkit-font-smoothing: antialiased; }
body { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vzn-focus); outline-offset: 2px; }
.vzn-label { font: var(--vzn-label); letter-spacing: var(--vzn-ls-label); text-transform: uppercase; color: var(--vzn-gold); }
.vzn-tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 120ms !important; transition-duration: 120ms !important; transition-property: opacity !important; }
}