/* GENERATED from design/tokens.css — do not edit directly */
/* ============================================================
   Design Tokens — Unified Source of Truth
   SUPERSET of app tokens.css + site tokens.
   Generated from this file by design/build-tokens.mjs.
   DO NOT edit agency/src/styles/tokens.css or
   proposals/web-dev/praktend/assets/tokens.css directly.
   ============================================================ */

/* ============================================================
   :root — app defaults (light mode) + additive global tokens
   The app block is byte-identical to the original tokens.css.
   Additional tokens for the marketing site are appended.
   ============================================================ */

:root {
  /* --- Brand Colors --- */
  --brand-primary: #2563eb;
  --brand-primary-hover: #1d4ed8;
  --brand-primary-light: #eff6ff;
  --brand-red: #ef4444;
  --brand-red-hover: #dc2626;
  --brand-orange: #ea580c;
  --brand-green: #22c55e;
  --brand-green-hover: #16a34a;

  /* --- Surface Colors --- */
  --bg: #ffffff;
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-muted: #f1f5f9;
  --bg-hover: #f8fafc;

  /* --- Text Colors --- */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  /* --- Borders --- */
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-focus: #2563eb;

  /* --- Spacing Scale ---
     Numeric px grid (2px-fine for tight UI, 4px+ for layout) is the canonical
     source; the t-shirt names are value-preserving aliases so existing
     var(--space-xs|sm|md|...) call-sites are unchanged. Mirrors --text-NN. */
  --space-1:  1px;
  --space-2:  2px;
  --space-3:  3px;
  --space-4:  4px;
  --space-5:  5px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-xs:  var(--space-4);
  --space-sm:  var(--space-8);
  --space-md:  var(--space-16);
  --space-lg:  var(--space-24);
  --space-xl:  var(--space-32);
  --space-2xl: var(--space-48);
  --space-3xl: var(--space-64);
  --section-gap: var(--space-32);

  /* --- Shadows (double-layer, modern) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);

  /* --- Border Radius --- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- Typography --- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Oxygen, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono-label: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* --- Accent (public surface — brand-neutral, warm/industrial) --- */
  --accent: #e5a85c;
  --accent-hover: #f0b871;
  --accent-muted: rgba(229, 168, 92, 0.14);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;

  /* --- Z-Index Scale --- */
  --z-base:     1;
  --z-dropdown: 200;
  --z-sticky:   300;
  --z-overlay:  1000;
  --z-modal:    2000;
  --z-toast:    3000;
  --z-max:      9999;

  /* --- Sidebar --- */
  --sidebar-width: 240px;
  --header-height: 56px;

  /* --- Status/Alert Colors (merge-compatible with ContractorScope) --- */
  --alert-success-bg: #dcfce7;
  --alert-success-text: #166534;
  --alert-error-bg: #fee2e2;
  --alert-error-text: #991b1b;
  --alert-warning-bg: #fef3c7;
  --alert-warning-text: #92400e;
  --alert-info-bg: #dbeafe;
  --alert-info-text: #1e40af;

  /* --- Extended Surfaces --- */
  --bg-input: #fafafa;
  --bg-dropdown: #f0f2f6;

  /* --- Overlay / backdrop --- */
  --bg-backdrop: rgba(0, 0, 0, 0.35);

  /* --- Filter chip remove-button hover (light bg over primary) --- */
  --filter-chip-remove-hover: rgba(37, 99, 235, 0.12);

  /* --- On-error foreground (text on error-bg surfaces) --- */
  --text-on-error: #ffffff;

  /* ── Compatibility aliases — tokens referenced in components but absent from
     the original token vocabulary. Defined here so all var(--x) references
     resolve without touching component files. (#dangling-token-cleanup)
     Each is aliased to the closest semantically-correct existing token.     */

  /* Background surface aliases */
  --bg-subtle:          var(--bg-muted);         /* slightly-off-surface tint; bg-muted is the nearest */
  --bg-surface:         var(--bg-card);          /* elevated card surface */
  --bg-primary:         var(--brand-primary-light); /* brand-tinted bg used in list/row highlights */
  --bg-secondary:       var(--bg-muted);         /* secondary surface; bg-muted is the nearest */
  --bg-card-emphasis:   var(--bg-hover);         /* emphasized card state (hover-level intensity) */
  --bg-card-selected:   var(--brand-primary-light); /* selected card; brand-tinted like --bg-primary */

  /* Text aliases */
  --text:               var(--text-primary);     /* bare --text; maps to the canonical primary text color */
  --text-tertiary:      var(--text-muted);       /* tertiary label; muted is the right step below secondary */
  --text-danger:        var(--alert-error-text); /* danger/error text on surfaces */

  /* Accent */
  --accent-subtle:      var(--accent-muted);     /* subtle accent tint; accent-muted is exact semantic match */

  /* Brand shorthand */
  --brand:              var(--brand-primary);    /* bare --brand shorthand */

  /* Overlay */
  --overlay-bg:         var(--bg-backdrop);      /* modal/drawer overlay backdrop color */

  /* Info state */
  --info-bg:            var(--alert-info-bg);    /* info banner background */
  --info-text:          var(--alert-info-text);  /* info banner text */

  /* Alert/status — danger variants (not covered by existing --alert-error-*) */
  --alert-danger-bg:    var(--alert-error-bg);   /* danger bg; error and danger are same semantic tier */
  --alert-danger-text:  var(--alert-error-text); /* danger text */

  /* Alert/status — border tokens (status borders not in original set)
     Aliased to the bg tier (pale pastel) rather than the text tier (saturated dark).
     Text-tier colors are too harsh for borders; bg-tier pastels give a soft,
     standard status-ring that pairs well with the bg fill. If a stronger border
     is needed in a specific component, author a local opacity variant inline. */
  --alert-error-border:   var(--alert-error-bg);    /* error border: soft pastel ring, not saturated text */
  --alert-success-border: var(--alert-success-bg);  /* success border: soft pastel ring */
  --alert-warning-border: var(--alert-warning-bg);  /* warning border: soft pastel ring */

  /* Alert/status — warn aliases (warn = warning; align naming) */
  --alert-warn-bg:      var(--alert-warning-bg);   /* warn is synonym for warning */
  --alert-warn-text:    var(--alert-warning-text); /* warn is synonym for warning */

  /* Radius mid-step (between --radius-sm:6px and --radius:8px … --radius-lg:12px) */
  --radius-md:          10px;                    /* explicit mid-step; 10px sits between --radius(8) and --radius-lg(12) */

  /* --- Extended Text --- */
  --text-on-primary: #ffffff;
  --text-placeholder: #94a3b8;

  /* --- Text on accent surface (gold: legible on light bg) --- */
  --text-on-accent: #1a1510;

  /* --- Accent-colored text (gold fails on light surfaces; use --accent-text instead) --- */
  --accent-text: var(--accent);

  /* --- Dark sections (landing page, hero, footer) --- */
  --bg-dark: #1a1a2e;
  --bg-dark-footer: #0f0f1e;

  /* --- Chart palette (warm editorial; consumed by chartSpec.js) ---
     Semantic tones for deltas, status, and alerts inside charts. */
  --chart-positive: var(--accent);
  --chart-negative: #c8553d;
  --chart-warning:  #d4a574;
  --chart-neutral:  var(--text-muted);

  /* Categorical/series palette — 8 hues that share the burnt-paper
     temperature so multi-series charts stay tonally cohesive. */
  --chart-series-1: var(--accent);  /* gold */
  --chart-series-2: #7fb069;         /* sage */
  --chart-series-3: #c8553d;         /* oxblood */
  --chart-series-4: #d4a574;         /* camel */
  --chart-series-5: #5c8a8a;         /* slate-teal */
  --chart-series-6: #b08d57;         /* bronze */
  --chart-series-7: #9b7e5c;         /* taupe */
  --chart-series-8: #e8c170;         /* wheat */

  /* Chart structural tokens (grid lines, axes, subtle overlays).
     These are dark-background defaults; overridden for light surfaces below. */
  --chart-grid:    rgba(255, 255, 255, 0.07);
  --chart-axis:    rgba(255, 255, 255, 0.15);
  --overlay-subtle: rgba(255, 255, 255, 0.06);

  /* Heatmap diverging stops — warm dark to warm light. Override in
     light-surface variants below. */
  --heatmap-stop-0: #1a1410;
  --heatmap-stop-1: #2d1f14;
  --heatmap-stop-2: #5a3a1f;
  --heatmap-stop-3: #b07c3d;
  --heatmap-stop-4: #e5a85c;
  --heatmap-stop-5: #f5dca3;

  /* ── Additive global tokens (marketing site / shared) ──────────────
     These do not exist in the app's original tokens.css.
     App surfaces ignore them; the marketing surface reads them.  */

  /* Rust — marketing accent colour (site's --accent value). Named
     separately so the app's --accent (#e5a85c) stays unchanged. */
  --rust: #7A2E1F;

  /* Gold (editorial/marketing — no collision: app never defined --gold) */
  --gold: #A88B5C;
  --gold-muted: rgba(168, 139, 92, 0.18);

  /* Soft border (site's --rule-soft) */
  --border-soft: #DCD2BC;

  /* Layout constraint tokens (editorial site) */
  --content: 1140px;
  --reading: 720px;

  /* ── Pixel type scale (site's fixed-size ladder) ──────────────────── */
  --text-8:  8px;
  --text-9:  9px;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-19: 19px;
  --text-20: 20px;
  --text-21: 21px;
  --text-22: 22px;
  --text-24: 24px;
  --text-26: 26px;
  --text-28: 28px;
  --text-30: 30px;
  --text-32: 32px;
  --text-36: 36px;
  --text-42: 42px;
  --text-48: 48px;
  --text-56: 56px;
  --text-64: 64px;
  --text-72: 72px;
  --text-84: 84px;
  --text-92: 92px;

  /* ── Fluid (responsive clamp) headline tokens ───────────────────── */
  --text-pull:     clamp(22px, 3.4vw, 30px);
  --text-h3-fluid: clamp(34px, 4.6vw, 52px);
  --text-h2-sm:    clamp(36px, 5vw, 56px);
  --text-h2:       clamp(40px, 5.6vw, 76px);
  --text-h2-lg:    clamp(40px, 6vw, 72px);
  --text-h2-xl:    clamp(44px, 6vw, 78px);
  --text-h1:       clamp(48px, 7vw, 92px);
  /* NOTE: --text-h3 was referenced in site.css but not defined there.
     Defining it here as a fluid value consistent with the h3 role. */
  --text-h3:       clamp(28px, 3.6vw, 40px);

  /* ── Font-weight tokens (Fraunces variable wght axis + mono) ──────── */
  --weight-light:   300;
  --weight-soft:    360;
  --weight-display: 380;
  --weight-normal:  400;
  --weight-medium:  500;

  /* ── Letter-spacing tokens ──────────────────────────────────────── */
  --tracking-display-xl: -0.04em;
  --tracking-h1:         -0.035em;
  --tracking-mid-tight:  -0.03em;
  --tracking-h2:         -0.025em;
  --tracking-h2-sm:      -0.02em;
  --tracking-h3:         -0.015em;
  --tracking-display-sm: -0.012em;
  --tracking-em:         -0.01em;
  --tracking-normal:     0;
  --tracking-tight:      0.02em;
  --tracking-wide-1:     0.04em;
  --tracking-wide-2:     0.06em;
  --tracking-wide-3:     0.08em;
  --tracking-wide-4:     0.1em;
  --tracking-wide-5:     0.12em;
  --tracking-cta:        0.14em;
  --tracking-wide-6:     0.16em;
  --tracking-eyebrow:    0.18em;
  --tracking-stamp:      0.2em;

  /* ── Line-height tokens ─────────────────────────────────────────── */
  --leading-h1:       0.96;
  --leading-headline: 0.98;
  --leading-h2:       1.0;
  --leading-display:  1.02;
  --leading-tight:    1.05;
  --leading-snug:     1.1;
  --leading-snug-2:   1.15;
  --leading-snug-3:   1.2;
  --leading-pull:     1.25;
  --leading-faq:      1.3;
  --leading-quote:    1.35;
  --leading-cozy:     1.4;
  --leading-lead:     1.45;
  --leading-medium:   1.5;
  --leading-body:     1.55;
  --leading-relax:    1.6;
  --leading-faq-a:    1.65;
  --leading-loose:    1.8;
}

/* ============================================================
   Dark Mode
   Activate with: document.documentElement.setAttribute('data-theme', 'dark')
   Compatible with ContractorScope [data-theme='dark'] pattern
   ============================================================ */

[data-theme='dark'] {
  /* --- Brand Colors (lighter for dark backgrounds) --- */
  --brand-primary: #60a5fa;
  --brand-primary-hover: #3b82f6;
  --brand-primary-light: rgba(96, 165, 250, 0.12);
  --brand-red: #f87171;
  --brand-red-hover: #ef4444;
  --brand-orange: #fb923c;
  --brand-green: #4ade80;
  --brand-green-hover: #22c55e;

  /* --- Surface Colors --- */
  --bg: #0f172a;
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --bg-muted: #1e293b;
  --bg-hover: #334155;
  --bg-input: #1e293b;
  --bg-dropdown: #334155;

  /* --- Overlay / backdrop (dark) --- */
  --bg-backdrop: rgba(0, 0, 0, 0.55);

  /* --- Filter chip remove-button hover (dark) --- */
  --filter-chip-remove-hover: rgba(96, 165, 250, 0.15);

  /* --- On-error foreground (dark) --- */
  --text-on-error: #ffffff;

  /* --- Text Colors --- */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;
  --text-on-primary: #ffffff;
  --text-placeholder: #475569;

  /* --- Borders --- */
  --border: #334155;
  --border-strong: #475569;
  --border-focus: #60a5fa;

  /* --- Shadows (stronger for dark backgrounds) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 5px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.2);

  /* --- Status/Alert Colors (dark variants) --- */
  --alert-success-bg: rgba(74, 222, 128, 0.12);
  --alert-success-text: #4ade80;
  --alert-error-bg: rgba(248, 113, 113, 0.12);
  --alert-error-text: #f87171;
  --alert-warning-bg: rgba(251, 146, 60, 0.12);
  --alert-warning-text: #fbbf24;
  --alert-info-bg: rgba(96, 165, 250, 0.12);
  --alert-info-text: #60a5fa;

  /* --- Dark sections (same in dark mode) --- */
  --bg-dark: #0f172a;
  --bg-dark-footer: #020617;
}

/* Shadcn compatibility class (mirrors data-theme='dark') */
.dark {
  color-scheme: dark;
}

/* ============================================================
   Public Surface (landing, legal, login, signup, pricing)
   Scoped via PublicLayout setting data-surface="public".
   Dashboards never match this selector so they stay light.
   ============================================================ */

[data-surface='public'] {
  --bg: #0a0a0a;
  --bg-page: #0a0a0a;
  --bg-card: #141414;
  --bg-muted: #1a1a1a;
  --bg-hover: #1f1f1f;
  --bg-input: transparent;

  --text-primary: #f5f1eb;
  --text-secondary: #a8a29e;
  --text-muted: #78716c;
  --text-placeholder: #57534e;

  --border: rgba(245, 241, 235, 0.1);
  --border-strong: rgba(245, 241, 235, 0.18);
  --border-focus: var(--accent);

  color-scheme: dark;
}

/* ============================================================
   Console Surface (consultant + company dashboards, auth pages)
   Scoped via layouts setting data-surface="console". Shares the
   warm editorial palette with the public site; supports a dark
   default and a tan (warm paper) light theme via data-theme.
   ============================================================ */

[data-surface='console'] {
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --brand-primary: var(--accent);
  --brand-primary-hover: var(--accent-hover);
  --brand-primary-light: var(--accent-muted);

  --border-focus: var(--accent);
}

/* Console — dark mode (default) */
[data-surface='console'],
[data-surface='console'][data-theme='dark'] {
  --bg: #0a0a0a;
  --bg-page: #0a0a0a;
  --bg-card: #121212;
  --bg-muted: #181818;
  --bg-hover: #1c1c1c;
  --bg-input: #141414;
  --bg-dropdown: #181818;

  /* --- Overlay / backdrop (console dark) --- */
  --bg-backdrop: rgba(0, 0, 0, 0.6);

  /* --- On-error foreground (console dark) --- */
  --text-on-error: #ffffff;

  --text-primary: #f5f1eb;
  --text-secondary: #b8b0a5;
  --text-muted: #7a7268;
  --text-placeholder: #7a7268;
  --text-on-primary: #0a0a0a;
  --text-inverse: #0a0a0a;

  /* --- Text on accent surface (dark console: legible on gold) --- */
  --text-on-accent: #1a1510;

  /* --- Accent-colored text (dark console: gold is fine on dark bg) --- */
  --accent-text: var(--accent);

  --border: rgba(245, 241, 235, 0.08);
  --border-strong: rgba(245, 241, 235, 0.16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 5px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

  --alert-success-bg: rgba(74, 222, 128, 0.1);
  --alert-success-text: #7ee0a7;
  --alert-error-bg: rgba(248, 113, 113, 0.1);
  --alert-error-text: #f5a3a3;
  --alert-warning-bg: rgba(229, 168, 92, 0.12);
  --alert-warning-text: var(--accent);
  --alert-info-bg: rgba(168, 192, 255, 0.1);
  --alert-info-text: #b9c8ff;

  color-scheme: dark;
}

/* Console — tan light mode (warm paper) */
[data-surface='console'][data-theme='light'] {
  --bg: #ebe2d1;
  --bg-page: #ebe2d1;
  --bg-card: #f3ecde;
  --bg-muted: #e2d7c1;
  --bg-hover: #dccfb5;
  --bg-input: #f7f1e5;
  --bg-dropdown: #f3ecde;

  /* --- Overlay / backdrop (console light) --- */
  --bg-backdrop: rgba(42, 37, 32, 0.4);

  /* --- On-error foreground (console light) --- */
  --text-on-error: #ffffff;

  --text-primary: #2a2520;
  --text-secondary: #5a5148;
  --text-muted: #8a7f70;
  --text-placeholder: #7a6f5e;
  --text-on-primary: #1a1510;
  --text-inverse: #f5f1eb;

  /* --- Text on accent surface (console light: legible on gold) --- */
  --text-on-accent: #1a1510;

  /* --- Accent-colored text (console light: gold fails on tan bg) --- */
  --accent-text: #8a5a1a;

  --border: rgba(42, 37, 32, 0.12);
  --border-strong: rgba(42, 37, 32, 0.22);

  --shadow-sm: 0 1px 2px rgba(58, 45, 24, 0.06);
  --shadow: 0 1px 2px rgba(58, 45, 24, 0.06), 0 1px 5px rgba(58, 45, 24, 0.04);
  --shadow-md: 0 2px 8px rgba(58, 45, 24, 0.08), 0 4px 16px rgba(58, 45, 24, 0.05);
  --shadow-lg: 0 6px 24px rgba(58, 45, 24, 0.1), 0 12px 40px rgba(58, 45, 24, 0.08);

  --alert-success-bg: rgba(34, 120, 72, 0.1);
  --alert-success-text: #226a44;
  --alert-error-bg: rgba(180, 60, 60, 0.1);
  --alert-error-text: #983535;
  --alert-warning-bg: rgba(184, 120, 40, 0.12);
  --alert-warning-text: #8a5a1a;
  --alert-info-bg: rgba(58, 90, 160, 0.08);
  --alert-info-text: #38528a;

  /* Chart structural tokens re-toned for warm-paper background. */
  --chart-grid:    rgba(42, 37, 32, 0.10);
  --chart-axis:    rgba(42, 37, 32, 0.20);
  --overlay-subtle: rgba(42, 37, 32, 0.05);

  /* Heatmap stops re-toned for warm-paper background so the low end
     stays readable instead of collapsing into the page color. */
  --heatmap-stop-0: #f5ecd6;
  --heatmap-stop-1: #ead7a8;
  --heatmap-stop-2: #d8b46a;
  --heatmap-stop-3: #b88436;
  --heatmap-stop-4: #8a5a1a;
  --heatmap-stop-5: #4d2f0a;

  color-scheme: light;
}

/* ============================================================
   Marketing Surface  [data-surface='marketing']
   The marketing static site links tokens.css and sets this
   attribute on <html>. Every var() the site reads resolves to
   its original value — zero visual change on the site.
   ============================================================ */

[data-surface='marketing'] {
  /* ── Semantic-role colours (app vocabulary) ─────────────────────── */
  --bg:           #F2EBDD;   /* paper */
  --bg-page:      #F2EBDD;   /* paper */
  --bg-card:      #E8DEC8;   /* paper-deep */
  --bg-muted:     #E8DEC8;   /* paper-deep */
  --bg-hover:     #DCD2BC;   /* rule-soft */

  --text-primary:   #1A1814; /* ink */
  --text-secondary: #2D2820; /* ink-soft */
  --text-muted:     #6B6357; /* mute */
  --text-inverse:   #F2EBDD; /* paper (on dark backgrounds) */

  --border:       #C7BCA3;   /* rule */
  --border-strong:#1A1814;   /* ink (heavy rules) */
  --border-focus: var(--rust);

  /* Accent = rust on the marketing surface.
     The app's --accent (#e5a85c) is untouched on other surfaces. */
  --accent:       var(--rust); /* #7A2E1F */
  --accent-hover: #9C4530;     /* accent-mid */
  --accent-muted: rgba(122, 46, 31, 0.10);

  /* Brand primary follows accent on marketing surface */
  --brand-primary:       var(--rust);
  --brand-primary-hover: #9C4530;
  --brand-primary-light: rgba(122, 46, 31, 0.08);

  /* --- Text on accent surface (marketing: rust accent; dark text is fine) --- */
  --text-on-accent: #f2ebdd;

  /* --- Accent-colored text (marketing surface: use rust for text) --- */
  --accent-text: var(--rust);

  /* Chart structural tokens for light editorial surface. */
  --chart-grid:    rgba(26, 24, 20, 0.10);
  --chart-axis:    rgba(26, 24, 20, 0.20);
  --overlay-subtle: rgba(26, 24, 20, 0.05);

  /* Radius: site is square-cornered */
  --radius-sm:  0;
  --radius:     0;
  --radius-lg:  0;
  --radius-xl:  0;
  --radius-full: 9999px; /* keep for pills/avatars */

  /* Shadows: not used by site; reset to invisible */
  --shadow-sm: none;
  --shadow:    none;
  --shadow-md: none;
  --shadow-lg: none;

  color-scheme: light;

  /* ── Material-name aliases (site.css reads these by name) ──────────
     Every var(--X) the static site uses resolves to its original value.  */

  /* Core palette aliases */
  --ink:        var(--text-primary);     /* #1A1814 */
  --ink-soft:   var(--text-secondary);   /* #2D2820 */
  --paper:      var(--bg);               /* #F2EBDD */
  --paper-deep: var(--bg-card);          /* #E8DEC8 */
  --mute:       var(--text-muted);       /* #6B6357 */
  --rule:       var(--border);           /* #C7BCA3 */
  --rule-soft:  var(--border-soft);      /* #DCD2BC */

  /* accent-mid is used standalone by site (footer dot, pricing-pin hover) */
  --accent-mid: #9C4530;

  /* gold stays named gold — app never defines it, no collision */
  /* --gold is already defined in :root (#A88B5C); inherit it here */

  /* Font aliases: serif maps to --font-display (Fraunces — shared).
     mono uses IBM Plex Mono per the decision (JetBrains stays for app). */
  --serif: var(--font-display);
  --mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* Layout alias */
  /* --content and --reading already defined in :root; inherited here */
}