/*
 * Design tokens. Everything else in /css reads from these.
 * Load order: tokens.css → fonts.css → base.css → components.css → utilities.css
 *
 * Groups are marked with "@group <name>" comments; the /docs style guide
 * reads this file and renders each group (designTokens in .eleventy.js).
 */
:root {
    /* @group palette */
    --cloud: #f9f5f3;
    --oat: #e5d9d4;
    --chai: #c8b8b2;
    --latte: #a48b84;
    --tea: #382a26;
    --puff: #f09292;
    --beam: #ec937c;
    --starlight: #edd495;
    --matcha: #82b78b;
    --comfy: #89c4bf;
    --joycon: #8b8fc3;

    /* @group color roles */
    --color-page: var(--oat);
    --color-surface: var(--cloud);
    --color-surface-raised: white;
    --color-surface-sunken: #f2ebe8;
    --color-text: var(--tea);
    --color-text-muted: var(--latte);
    --color-text-subtle: var(--chai);
    --color-text-faint: gray;
    --color-text-quiet: #666;
    --color-link: var(--joycon);
    --color-link-hover: var(--matcha);
    --color-accent: var(--beam);
    --color-emphasis: var(--comfy);
    --color-code: var(--puff);
    --color-fill: var(--oat);
    --color-fill-hover: var(--chai);
    --color-fill-inverse: var(--tea);
    --color-border: var(--oat);
    --color-border-strong: var(--chai);
    --color-border-control: #ccc;
    --color-border-card: #ddd;
    --color-border-inactive: #999;
    --color-success: var(--matcha);
    --color-error: var(--puff);
    --color-info: var(--comfy);

    /* @group status */
    --status-active: var(--matcha);
    --status-paused: var(--starlight);
    --status-finished: var(--joycon);
    --status-unknown: #999999;

    /* @group font families */
    --serif: "Artifex", serif;
    --sans-serif: -apple-system, "system-ui", noto, arial, sans-serif;
    --pixel: "Argent Pixel CF", Inter, sans-serif;
    --mono: "Departure Mono";
    --code: "Cartograph CF", ui-monospace, SFMono-Regular, monospace;

    /* @group type scale */
    --text-label: small;
    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-base: 1rem;
    --text-body: 1.1em;
    --text-lg: 1.1rem;
    --text-xl: 1.2rem;
    --text-2xl: 1.4rem;
    --leading: 1.5;

    /* @group spacing */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-36: 36px;
    --space-48: 48px;

    /* @group radii */
    --radius-sm: 3px;
    --radius: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-round: 50%;

    /* @group borders */
    --border: 1px solid var(--color-border);
    --border-dashed: 2px dashed var(--color-border);
    --border-control: 1px solid var(--color-border-control);
    --border-inactive: 2px dashed var(--color-border-inactive);

    /* @group motion */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration-base: 0.2s;
    --duration-slow: 0.3s;

    /* @group layout */
    --measure: 600px;
    --measure-quote: 540px;

    /* @group breakpoints */
    /* Reference only: media queries can't read custom properties, so the
       same values are written out in base.css and components.css. */
    --bp-narrow: 600px;
    --bp-wide: 860px;
}

/* No shadow tokens: the site is flat and doesn't use box-shadow anywhere. */