/*
 * Semantic tokens.
 *
 * --brand-* properties are printed from the active brand config
 * (config/brand/{slug}/brand.json). This file is the only place that reads
 * them. Components use the semantic --color-*, --font-*, and layout tokens.
 */
:root {
  /* Color */
  --color-text: var(--brand-ink);
  --color-text-muted: color-mix(in srgb, var(--brand-ink) 74%, var(--brand-surface));
  --color-structure: var(--brand-structure);
  --color-on-structure: var(--brand-surface-alt);
  --color-surface: var(--brand-surface);
  --color-surface-alt: var(--brand-surface-alt);
  --color-border: var(--brand-border);
  --color-tint: var(--brand-tint);
  --color-control-border: color-mix(in srgb, var(--brand-ink) 52%, var(--brand-surface));
  --color-accent: var(--brand-accent);
  --color-accent-text: var(--brand-accent-text);
  --color-accent-on-dark: var(--brand-accent-on-dark);
  --color-status-success: var(--brand-status-success);
  --color-status-held: var(--brand-status-held);
  --color-status-error: var(--brand-status-error);
  --color-status-archived: var(--brand-status-archived);
  --color-shadow: color-mix(in srgb, var(--brand-ink) 9%, transparent);

  /* Type */
  --font-sans: var(--brand-font-sans, system-ui), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--brand-font-mono, ui-monospace), ui-monospace, monospace;
  --font-serif: var(--brand-font-serif, ui-serif), ui-serif, serif;
  --font-native: var(--brand-font-native-script, system-ui), system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;

  /* Space (4 px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Shape */
  --radius-data: 3px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-pill: 999px;

  /* Datum motif */
  --datum-weight: 1px;
  --tick-width: 2px;
  --tick-height: 10px;

  /* Layout */
  --content-max: 1280px;
  --page-margin: clamp(20px, 5.56vw, 80px);
  --gutter: 24px;
  --section-gap: var(--space-9);
  --header-height: 76px;

  /* Motion */
  --duration: 180ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (width <= 899px) {
  :root {
    --gutter: 16px;
    --section-gap: var(--space-8);
    --header-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
}