/* mthera design tokens
   Color values intentionally preserve the current monochrome theme. */
:root {
    color-scheme: light;

    /* Color roles */
    --color-page: #f1f1f1;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f1f1;
    --color-ink: #151717;
    --color-ink-soft: #383e3e;
    --color-ink-muted: #535959;
    --color-accent: #151717;
    --color-on-accent: #ffffff;
    --color-border: #dedede;

    /* Typography */
    --font-sans: "Instrument Sans", "Prompt", sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-display: clamp(3.5rem, 6.1vw, 5.5rem);
    --text-display-mobile: 2.5rem;
    --text-section: 2.25rem;
    --text-card-title: 1.1875rem;
    --leading-tight: 1.08;
    --leading-body: 1.65;

    /* Spacing and layout */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --content-max: 1280px;
    --content-gutter: clamp(20px, 3.75vw, 48px);
    --space-header-y: 18px;
    --space-content-y: 22px;
    --space-content-bottom: 108px;

    /* Shape and elevation */
    --radius-control: 2px;
    --radius-panel: 3px;
    --radius-media: 2px;
    --radius-pill: 999px;
    --shadow-page: 0 18px 70px #15171710;
    --shadow-dock: 0 8px 28px #15171714;

    /* Motion */
    --ease-fluid: cubic-bezier(.22, 1, .36, 1);
    --duration-fast: 250ms;
    --duration-ui: 320ms;
    --duration-reveal: 850ms;

    /* Existing component aliases */
    --merlot: var(--color-ink);
    --paper: var(--color-surface);
    --ink: var(--color-ink);
    --copper: var(--color-accent);
    --soft: var(--color-surface-muted);
    --rule: var(--color-border);
    --ease: var(--ease-fluid);
}