/* Hallmark · genre: editorial · designed-as-app: Causa commerce
   Brand-preserving additive tokens. Existing tokens.css is loaded first. */
:root {
  --color-paper: oklch(from var(--surface-page) l c h);
  --color-paper-2: oklch(from var(--surface-alt) l c h);
  --color-ink: oklch(from var(--text-primary) l c h);
  --color-muted: oklch(from var(--text-muted) l c h);
  --color-accent: oklch(from var(--accent) l c h);
  --color-accent-ink: oklch(from var(--accent-fg) l c h);
  --color-rule: var(--border-subtle);
  --color-rule-2: var(--border-strong);
  --color-focus: var(--accent);
  --color-photo: var(--e-light-bg);
  --font-outlier: var(--font-mono);
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-hero: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem);
  --leading-body: 1.6;
  --space-xs: var(--space-3);
  --space-sm: var(--space-4);
  --space-md: var(--space-5);
  --space-lg: var(--space-6);
  --space-xl: var(--space-7);
  --space-2xl: var(--space-8);
  --space-3xl: var(--space-9);
  --section-y: clamp(2rem, 1.5rem + 2vw, 4rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
  --page-max: var(--max-w);
  --radius-card: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --rule-hair: 1px;
  --rule-fine: 2px;
  --control-height: 44px;
  --focus-width: 3px;
  --dur-short: var(--dur-fast);
  --directory-name: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --directory-title: clamp(2rem, 1.5rem + 2vw, 3rem);
  --tracking-ui: -0.01em;
}
@supports not (color: oklch(from white l c h)) {
  :root {
    --color-paper: var(--surface-page);
    --color-paper-2: var(--surface-alt);
    --color-ink: var(--text-primary);
    --color-muted: var(--text-muted);
    --color-accent: var(--accent);
    --color-accent-ink: var(--accent-fg);
  }
}