/* ============================================================
 * VI Marketing & Branding — Design Tokens
 * tokens.css | v0.1.0
 *
 * AUTO-GENERATED — do not edit this file directly.
 * Source of truth: tokens/tokens.json (exported from Figma)
 * Rebuild: node build-tokens.js
 * Generated: 2026-07-08
 * ============================================================
 *
 * HOW TO USE
 * -----------
 * 1. Link this file in your HTML or import in your CSS:
 *      <link rel="stylesheet" href="/tokens/tokens.css">
 *      @import '/tokens/tokens.css';
 *
 * 2. Use semantic tokens in your component CSS:
 *      background-color: var(--color-background-default);
 *      color: var(--color-text-primary);
 *      padding: var(--spacing-component-padding-md);
 *
 * 3. NEVER hardcode hex values or pixel values in components.
 *    Always reference a token. If a token doesn't exist, add it
 *    to tokens.json first, then rebuild.
 *
 * TOKEN LAYERS
 * ------------
 * Primitives  (--primitive-*)  Raw values. Don't use directly in components.
 * Semantic    (--)             Named by role. Use these in all component code.
 * ============================================================ */


/* ============================================================
 * PRIMITIVES
 * Raw values. The "what." Do not use directly in components.
 * Reference from semantic tokens only.
 * ============================================================ */

:root {

  /* ── Color ── */
  --primitive-color-brand-50: #eff6ff;  /* Lightest brand tint — backgrounds, highlights */
  --primitive-color-brand-100: #dbeafe;
  --primitive-color-brand-200: #bfdbfe;
  --primitive-color-brand-300: #93c5fd;
  --primitive-color-brand-400: #3b82f6;  /* Focus ring, lighter accents */
  --primitive-color-brand-500: #2563eb;  /* Primary brand color */
  --primitive-color-brand-600: #1d4ed8;  /* Hover state */
  --primitive-color-brand-700: #1d4ed8;  /* Active / pressed state */
  --primitive-color-brand-800: #1e40af;
  --primitive-color-brand-900: #1e3a8a;  /* Darkest brand — high contrast contexts */
  --primitive-color-neutral-0: #ffffff;  /* Pure white */
  --primitive-color-neutral-50: #f9fafb;  /* Page background */
  --primitive-color-neutral-100: #f3f4f6;  /* Subtle background, table rows */
  --primitive-color-neutral-200: #e5e7eb;  /* Borders, dividers */
  --primitive-color-neutral-300: #d1d5db;
  --primitive-color-neutral-400: #9ca3af;  /* Placeholder text, disabled */
  --primitive-color-neutral-500: #6b7280;  /* Secondary text, captions */
  --primitive-color-neutral-600: #4b5563;
  --primitive-color-neutral-700: #374151;  /* Body text */
  --primitive-color-neutral-800: #1f2937;
  --primitive-color-neutral-900: #111827;  /* Headings, maximum contrast */
  --primitive-color-success-100: #dcfce7;
  --primitive-color-success-500: #22c55e;
  --primitive-color-success-700: #15803d;
  --primitive-color-warning-100: #fef9c3;
  --primitive-color-warning-500: #eab308;
  --primitive-color-warning-700: #a16207;
  --primitive-color-error-100: #fee2e2;
  --primitive-color-error-500: #ef4444;
  --primitive-color-error-700: #b91c1c;
  --primitive-color-error-800: #991b1b;  /* Destructive hover/active — darker step below error.700 */
  --primitive-color-alpha-white-65: rgba(255, 255, 255, 0.65);  /* Muted white — secondary text on dark surfaces */
  --primitive-color-alpha-white-75: rgba(255, 255, 255, 0.75);  /* Muted white — secondary text on brand surfaces */

  /* ── Spacing ── */
  --primitive-spacing-0: 0px;
  --primitive-spacing-1: 4px;
  --primitive-spacing-2: 8px;
  --primitive-spacing-3: 12px;
  --primitive-spacing-4: 16px;
  --primitive-spacing-5: 20px;
  --primitive-spacing-6: 24px;
  --primitive-spacing-8: 32px;
  --primitive-spacing-10: 40px;
  --primitive-spacing-12: 48px;
  --primitive-spacing-16: 64px;
  --primitive-spacing-20: 80px;
  --primitive-spacing-24: 96px;
  --primitive-spacing-32: 128px;
  --primitive-spacing-0-5: 2px;  /* Half step — hairline offsets, micro transforms */

  /* ── Radius ── */
  --primitive-radius-none: 0px;
  --primitive-radius-sm: 4px;
  --primitive-radius-md: 8px;
  --primitive-radius-lg: 12px;
  --primitive-radius-xl: 16px;
  --primitive-radius-2xl: 24px;
  --primitive-radius-full: 9999px;

  /* ── Border ── */
  --primitive-border-width-1: 1px;
  --primitive-border-width-2: 2px;
  --primitive-border-width-3: 3px;
  --primitive-border-width-4: 4px;

  /* ── Font ── */
  --primitive-font-family-heading: 'Montserrat', sans-serif;  /* VI brand heading font */
  --primitive-font-family-body: 'Nunito Sans', sans-serif;  /* VI brand body font */
  --primitive-font-family-mono: 'Fira Code', monospace;
  --primitive-font-size-xs: 12px;
  --primitive-font-size-sm: 14px;
  --primitive-font-size-md: 16px;  /* Base body size */
  --primitive-font-size-lg: 18px;
  --primitive-font-size-xl: 20px;
  --primitive-font-size-2xl: 24px;
  --primitive-font-size-3xl: 30px;
  --primitive-font-size-4xl: 36px;
  --primitive-font-size-5xl: 48px;
  --primitive-font-size-6xl: 60px;
  --primitive-font-size-7xl: 72px;  /* Display scale — brand-forward headlines */
  --primitive-font-size-8xl: 96px;  /* Display scale — largest brand-forward headlines */
  --primitive-font-weight-regular: 400;
  --primitive-font-weight-medium: 500;
  --primitive-font-weight-semibold: 600;
  --primitive-font-weight-bold: 700;
  --primitive-font-weight-extrabold: 800;
  --primitive-font-lineheight-none: 1;  /* Solid — buttons, single-line UI controls */
  --primitive-font-lineheight-tight: 1.2;  /* Headings */
  --primitive-font-lineheight-snug: 1.375;
  --primitive-font-lineheight-normal: 1.5;  /* Body text */
  --primitive-font-lineheight-relaxed: 1.625;
  --primitive-font-lineheight-loose: 2;
  --primitive-font-letterspacing-tight: -0.025em;
  --primitive-font-letterspacing-normal: 0em;
  --primitive-font-letterspacing-wide: 0.025em;
  --primitive-font-letterspacing-wider: 0.05em;
  --primitive-font-letterspacing-widest: 0.1em;  /* Eyebrow labels, all-caps */

  /* ── Shadow ── */
  --primitive-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --primitive-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --primitive-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --primitive-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --primitive-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --primitive-shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.05);

  /* ── Transition ── */
  --primitive-transition-duration-fast: 100ms;
  --primitive-transition-duration-normal: 200ms;
  --primitive-transition-duration-slow: 300ms;
  --primitive-transition-duration-entrance: 500ms;  /* Entrance animations — pairs with easing.entrance */
  --primitive-transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-transition-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --primitive-transition-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --primitive-transition-easing-entrance: cubic-bezier(0.16, 1, 0.3, 1);  /* Primary entrance curve — never linear/ease/bounce for entrances */
}


/* ============================================================
 * SEMANTIC TOKENS
 * Named by role and intent. The "why." Use these in components.
 * ============================================================ */

:root {

  /* ── Color ── */
  --color-background-page: var(--primitive-color-neutral-50);  /* Main page background */
  --color-background-default: var(--primitive-color-neutral-0);  /* Card, panel backgrounds */
  --color-background-subtle: var(--primitive-color-neutral-100);  /* Table rows, code blocks */
  --color-background-inverse: var(--primitive-color-neutral-900);  /* Dark sections */
  --color-text-primary: var(--primitive-color-neutral-900);  /* Headings, strong body text */
  --color-text-secondary: var(--primitive-color-neutral-500);  /* Supporting text, captions */
  --color-text-placeholder: var(--primitive-color-neutral-500);  /* Form placeholder text — neutral.500 = 4.83:1 on white, passes AA (neutral.400 disabled would fail) */
  --color-text-disabled: var(--primitive-color-neutral-400);
  --color-text-inverse: var(--primitive-color-neutral-0);  /* Text on dark backgrounds */
  --color-text-inverse-secondary: var(--primitive-color-alpha-white-65);  /* Secondary/supporting text on dark backgrounds */
  --color-text-on-brand: var(--primitive-color-neutral-0);  /* Text on brand-colored surfaces */
  --color-text-on-brand-secondary: var(--primitive-color-alpha-white-75);  /* Secondary/supporting text on brand-colored surfaces */
  --color-text-link: var(--primitive-color-brand-600);
  --color-text-link-hover: var(--primitive-color-brand-700);
  --color-border-default: var(--primitive-color-neutral-200);
  --color-border-strong: var(--primitive-color-neutral-300);
  --color-border-focus: var(--primitive-color-brand-500);  /* DEPRECATED — do not use for new components, see .agent/context.md; use color.interactive.focus for focus rings */
  --color-border-interactive: var(--primitive-color-neutral-500);  /* Resting border for interactive controls (inputs, selects) — neutral.500 = 4.8:1 on white, passes WCAG 1.4.11 (3:1). Stronger than border.default, which stays light for decorative containers like cards. */
  --color-border-interactive-hover: var(--primitive-color-neutral-600);  /* Hover border for interactive controls — darker than resting so hover reads as intensify, not lighten */
  --color-interactive-default: var(--primitive-color-brand-500);
  --color-interactive-hover: var(--primitive-color-brand-600);
  --color-interactive-active: var(--primitive-color-brand-700);
  --color-interactive-focus: var(--primitive-color-brand-400);
  --color-interactive-disabled: var(--primitive-color-neutral-300);
  --color-feedback-success-bg: var(--primitive-color-success-100);
  --color-feedback-success-text: var(--primitive-color-success-700);
  --color-feedback-warning-bg: var(--primitive-color-warning-100);
  --color-feedback-warning-text: var(--primitive-color-warning-700);
  --color-feedback-error-bg: var(--primitive-color-error-100);
  --color-feedback-error-text: var(--primitive-color-error-700);
  --color-feedback-error-strong: var(--primitive-color-error-700);  /* Solid error surface — destructive buttons; pair with text.inverse */
  --color-feedback-error-strong-hover: var(--primitive-color-error-800);  /* Hover/active step for solid error surfaces */
  --color-surface-default: var(--primitive-color-neutral-0);  /* Default surface — cards, panels */
  --color-surface-subtle: var(--primitive-color-neutral-100);  /* Subtle surface — tinted panels, footers, neutral fills */
  --color-surface-accent: var(--primitive-color-brand-50);  /* Lightest brand-tinted surface */
  --color-surface-accent-strong: var(--primitive-color-brand-100);  /* Stronger brand-tinted surface */
  --color-surface-inverse: var(--primitive-color-neutral-900);  /* Dark surface — inverse sections */
  --color-on-surface-default: var(--primitive-color-neutral-900);  /* Text on surface.default — AA pair */
  --color-on-surface-subtle: var(--primitive-color-neutral-700);  /* Text on surface.subtle — AA pair */
  --color-on-surface-accent: var(--primitive-color-brand-800);  /* Text on surface.accent — AA pair */
  --color-on-surface-accent-strong: var(--primitive-color-brand-800);  /* Text on surface.accent-strong — AA pair */
  --color-on-surface-inverse: var(--primitive-color-neutral-0);  /* Text on surface.inverse — AA pair */

  /* ── Font ── */
  --font-family-heading: var(--primitive-font-family-heading);  /* Heading font role — skin display-font axis override point */
  --font-family-body: var(--primitive-font-family-body);  /* Body font role */
  --font-family-mono: var(--primitive-font-family-mono);  /* Monospace font role — code */
  --font-size-xs: var(--primitive-font-size-xs);
  --font-size-sm: var(--primitive-font-size-sm);
  --font-size-md: var(--primitive-font-size-md);
  --font-size-lg: var(--primitive-font-size-lg);
  --font-size-xl: var(--primitive-font-size-xl);
  --font-size-2xl: var(--primitive-font-size-2xl);
  --font-size-3xl: var(--primitive-font-size-3xl);
  --font-size-4xl: var(--primitive-font-size-4xl);
  --font-size-5xl: var(--primitive-font-size-5xl);
  --font-size-6xl: var(--primitive-font-size-6xl);
  --font-size-7xl: var(--primitive-font-size-7xl);
  --font-size-8xl: var(--primitive-font-size-8xl);
  --font-weight-regular: var(--primitive-font-weight-regular);
  --font-weight-medium: var(--primitive-font-weight-medium);
  --font-weight-semibold: var(--primitive-font-weight-semibold);
  --font-weight-bold: var(--primitive-font-weight-bold);
  --font-weight-extrabold: var(--primitive-font-weight-extrabold);
  --font-leading-none: var(--primitive-font-lineheight-none);
  --font-leading-tight: var(--primitive-font-lineheight-tight);
  --font-leading-snug: var(--primitive-font-lineheight-snug);
  --font-leading-normal: var(--primitive-font-lineheight-normal);
  --font-leading-relaxed: var(--primitive-font-lineheight-relaxed);
  --font-leading-loose: var(--primitive-font-lineheight-loose);
  --font-letterspacing-tight: var(--primitive-font-letterspacing-tight);
  --font-letterspacing-normal: var(--primitive-font-letterspacing-normal);
  --font-letterspacing-wide: var(--primitive-font-letterspacing-wide);
  --font-letterspacing-wider: var(--primitive-font-letterspacing-wider);
  --font-letterspacing-widest: var(--primitive-font-letterspacing-widest);

  /* ── Motion ── */
  --motion-duration-fast: var(--primitive-transition-duration-fast);  /* Micro-interactions — links, small state changes */
  --motion-duration-normal: var(--primitive-transition-duration-normal);  /* Standard component transitions */
  --motion-duration-slow: var(--primitive-transition-duration-slow);
  --motion-duration-entrance: var(--primitive-transition-duration-entrance);  /* Entrance animations */
  --motion-ease-standard: var(--primitive-transition-easing-default);  /* Standard state-change easing */
  --motion-ease-in: var(--primitive-transition-easing-in);
  --motion-ease-out: var(--primitive-transition-easing-out);
  --motion-ease-entrance: var(--primitive-transition-easing-entrance);  /* Primary entrance curve */
  --motion-distance-xs: var(--primitive-spacing-0-5);  /* Micro transform distance — hover lifts */
  --motion-distance-sm: var(--primitive-spacing-2);  /* Small entrance transform distance */
  --motion-distance-md: var(--primitive-spacing-4);  /* Standard entrance transform distance */

  /* ── Spacing ── */
  --spacing-component-padding-2xs: var(--primitive-spacing-0-5);  /* Hairline padding — badges, compact chips */
  --spacing-component-padding-xs: var(--primitive-spacing-1);
  --spacing-component-padding-sm: var(--primitive-spacing-2);
  --spacing-component-padding-md: var(--primitive-spacing-4);
  --spacing-component-padding-lg: var(--primitive-spacing-6);
  --spacing-component-padding-xl: var(--primitive-spacing-8);
  --spacing-component-gap-sm: var(--primitive-spacing-2);
  --spacing-component-gap-md: var(--primitive-spacing-4);
  --spacing-component-gap-lg: var(--primitive-spacing-6);
  --spacing-layout-section-sm: var(--primitive-spacing-12);  /* Compact section vertical padding */
  --spacing-layout-section-md: var(--primitive-spacing-16);  /* Standard section vertical padding */
  --spacing-layout-section-lg: var(--primitive-spacing-24);  /* Hero / feature section padding */
  --spacing-layout-container: var(--primitive-spacing-6);  /* Container horizontal gutter (mobile) */
  --spacing-layout-container-md: var(--primitive-spacing-8);  /* Container horizontal gutter (tablet+) */
  --spacing-layout-gap: var(--primitive-spacing-6);  /* Default grid column/row gap */
  --spacing-layout-gap-sm: var(--primitive-spacing-4);  /* Tight grid gap */
  --spacing-layout-gap-lg: var(--primitive-spacing-8);  /* Loose grid gap */
  --spacing-layout-stack-sm: var(--primitive-spacing-4);  /* Tight vertical stack gap */
  --spacing-layout-stack-md: var(--primitive-spacing-6);  /* Standard vertical stack gap */
  --spacing-layout-stack-lg: var(--primitive-spacing-8);  /* Loose vertical stack gap */

  /* ── Typography ── */
  --typography-display-sm-size: var(--primitive-font-size-6xl);  /* Display small — brand-forward headline */
  --typography-display-sm-weight: var(--primitive-font-weight-bold);
  --typography-display-sm-lineheight: var(--primitive-font-lineheight-tight);
  --typography-display-sm-letterspacing: var(--primitive-font-letterspacing-tight);
  --typography-display-lg-size: var(--primitive-font-size-7xl);  /* Display large — brand-forward headline */
  --typography-display-lg-weight: var(--primitive-font-weight-bold);
  --typography-display-lg-lineheight: var(--primitive-font-lineheight-tight);
  --typography-display-lg-letterspacing: var(--primitive-font-letterspacing-tight);
  --typography-display-xl-size: var(--primitive-font-size-8xl);  /* Display XL — largest brand-forward headline */
  --typography-display-xl-weight: var(--primitive-font-weight-extrabold);
  --typography-display-xl-lineheight: var(--primitive-font-lineheight-tight);
  --typography-display-xl-letterspacing: var(--primitive-font-letterspacing-tight);
  --typography-heading-h1-size: var(--primitive-font-size-5xl);
  --typography-heading-h1-weight: var(--primitive-font-weight-bold);
  --typography-heading-h1-lineheight: var(--primitive-font-lineheight-tight);
  --typography-heading-h1-letterspacing: var(--primitive-font-letterspacing-tight);
  --typography-heading-h2-size: var(--primitive-font-size-4xl);
  --typography-heading-h2-weight: var(--primitive-font-weight-bold);
  --typography-heading-h2-lineheight: var(--primitive-font-lineheight-tight);
  --typography-heading-h2-letterspacing: var(--primitive-font-letterspacing-tight);
  --typography-heading-h3-size: var(--primitive-font-size-3xl);
  --typography-heading-h3-weight: var(--primitive-font-weight-semibold);
  --typography-heading-h3-lineheight: var(--primitive-font-lineheight-snug);
  --typography-heading-h3-letterspacing: var(--primitive-font-letterspacing-normal);
  --typography-heading-h4-size: var(--primitive-font-size-2xl);
  --typography-heading-h4-weight: var(--primitive-font-weight-semibold);
  --typography-heading-h4-lineheight: var(--primitive-font-lineheight-snug);
  --typography-heading-h4-letterspacing: var(--primitive-font-letterspacing-normal);
  --typography-body-lg-size: var(--primitive-font-size-lg);
  --typography-body-lg-lineheight: var(--primitive-font-lineheight-relaxed);
  --typography-body-md-size: var(--primitive-font-size-md);
  --typography-body-md-lineheight: var(--primitive-font-lineheight-normal);
  --typography-body-sm-size: var(--primitive-font-size-sm);
  --typography-body-sm-lineheight: var(--primitive-font-lineheight-normal);
  --typography-label-size: var(--primitive-font-size-xs);
  --typography-label-weight: var(--primitive-font-weight-semibold);
  --typography-label-letterspacing: var(--primitive-font-letterspacing-widest);

  /* ── Radius ── */
  --radius-button: var(--primitive-radius-md);
  --radius-input: var(--primitive-radius-md);
  --radius-checkbox: var(--primitive-radius-sm);  /* Checkbox box corners (radio uses a structural 50% circle) */
  --radius-alert: var(--primitive-radius-md);
  --radius-card: var(--primitive-radius-lg);
  --radius-badge: var(--primitive-radius-full);
  --radius-modal: var(--primitive-radius-xl);

  /* ── Shadow ── */
  --shadow-card: var(--primitive-shadow-md);
  --shadow-modal: var(--primitive-shadow-xl);
  --shadow-button: var(--primitive-shadow-sm);
  --shadow-dropdown: var(--primitive-shadow-lg);

  /* ── Border ── */
  --border-width-thin: var(--primitive-border-width-1);  /* Default border weight — cards, dividers */
  --border-width-medium: var(--primitive-border-width-2);  /* Emphasis border weight — buttons, bordered cards */
  --border-width-thick: var(--primitive-border-width-4);  /* Accent border weight — alert accents */

  /* ── Focus ── */
  --focus-ring-width: var(--primitive-border-width-3);  /* Focus outline width — a11y baseline, do not thin */
  --focus-ring-offset: var(--primitive-border-width-2);  /* Focus outline offset */
  --focus-ring-radius: var(--primitive-radius-sm);  /* Rounding applied to focus outlines on inline elements (links) */

  /* ── Sizing ── */
  --sizing-indicator-dot: 6px;  /* Status indicator dot / radio inner dot — fixed constant, deliberately not primitive-backed or skinnable (checkpoint decision 2026-07-05) */
  --sizing-indicator-caret: 10px;  /* Select dropdown caret glyph — fixed UI constant, same family as indicator.dot */
  --sizing-control-checkbox: 18px;  /* Checkbox / radio control box — fixed UI constant */
  --sizing-container-max: 1200px;  /* Default container max-width — stable core */
  --sizing-container-narrow: 800px;  /* Narrow container — article/blog body */
  --sizing-container-wide: 1440px;  /* Wide container — galleries, full-bleed content */
  --sizing-content-narrow: 680px;  /* Narrow content column — section headers, centered text blocks */
  --sizing-grid-min-column: 280px;  /* Minimum auto-fill grid column width — card grids */
}


/* ============================================================
 * SKINS
 * Scoped primitive overrides — set data-skin on <html> to apply.
 * Skins override brand-expression primitives only; semantic
 * tokens resolve through them live, so components re-skin
 * with no recompile. Source of truth: skins/[name].json
 * ============================================================ */

/* ── Skin: default — VI default skin — clean, neutral, elevated. Values match the core primitives. ── */
[data-skin="default"] {

  /* ── Color ── */
  --primitive-color-brand-50: #eff6ff;
  --primitive-color-brand-100: #dbeafe;
  --primitive-color-brand-200: #bfdbfe;
  --primitive-color-brand-300: #93c5fd;
  --primitive-color-brand-400: #3b82f6;
  --primitive-color-brand-500: #2563eb;
  --primitive-color-brand-600: #1d4ed8;
  --primitive-color-brand-700: #1d4ed8;
  --primitive-color-brand-800: #1e40af;
  --primitive-color-brand-900: #1e3a8a;
  --primitive-color-neutral-0: #ffffff;  /* Surface canvas */
  --primitive-color-neutral-50: #f9fafb;  /* Page canvas */

  /* ── Font ── */
  --primitive-font-family-heading: 'Montserrat', sans-serif;  /* Display/heading axis */
}

/* ── Skin: brand-forward — PLACEHOLDER — brand-forward contrast skin demo values (aubergine brand, cream canvas, serif display). Proves the skin-swap mechanism; real brand-forward values land 2026-07-07. ── */
[data-skin="brand-forward"] {

  /* ── Color ── */
  --primitive-color-brand-50: #faf5fa;
  --primitive-color-brand-100: #f3e6f3;
  --primitive-color-brand-200: #e3cbe3;
  --primitive-color-brand-300: #c99fc9;
  --primitive-color-brand-400: #a86ba8;  /* Focus ring */
  --primitive-color-brand-500: #7c2d7c;  /* Primary brand — ~8.3:1 on white */
  --primitive-color-brand-600: #6b246b;  /* Hover */
  --primitive-color-brand-700: #571d57;  /* Active */
  --primitive-color-brand-800: #431643;
  --primitive-color-brand-900: #2f102f;
  --primitive-color-neutral-0: #fdf9f3;  /* Cream surface canvas */
  --primitive-color-neutral-50: #f8f1e7;  /* Cream page canvas */

  /* ── Font ── */
  --primitive-font-family-heading: Georgia, 'Times New Roman', serif;  /* Expressive serif display axis (placeholder) */
}