/* Warm linen. The only production color and typography source of truth.
   Components consume semantic tokens; palette values never live in page CSS. */
:root {
    color-scheme: light;
    --hl-linen: #f5f0e7;
    --hl-canvas: #faf8f2;
    --hl-paper: #fffdf8;
    --hl-clay: #b65338;
    --hl-clay-deep: #97422c;
    --hl-moss: #65745d;
    --hl-forest: #303f33;
    --hl-forest-hover: #435a48;
    --hl-honey: #dbb968;
    --hl-ink: #30332e;
    --hl-muted: #65695e;
    --hl-line: #dddcd0;
    --hl-sage-wash: #e9ede3;
    --hl-clay-wash: #f5e8df;
    --hl-honey-wash: #f2e9cb;
    --hl-white: #ffffff;
    --hl-danger: #9d382a;
    --hl-danger-wash: #fbede6;
    --hl-shadow-color: #30332e0d;
    --hl-overlay: #faf8f2f5;

    --hl-background: var(--hl-canvas);
    --hl-surface: var(--hl-paper);
    --hl-surface-subtle: var(--hl-linen);
    --hl-text: var(--hl-ink);
    --hl-text-muted: var(--hl-muted);
    --hl-accent: var(--hl-clay);
    --hl-action: var(--hl-forest);
    --hl-action-hover: var(--hl-forest-hover);
    --hl-on-action: var(--hl-paper);
    --hl-border: var(--hl-line);
    --hl-focus: var(--hl-clay);
    --hl-success: var(--hl-forest);
    --hl-success-background: var(--hl-sage-wash);
    --hl-error: var(--hl-danger);
    --hl-error-background: var(--hl-danger-wash);

    --hl-font-body: "Segoe UI", Arial, sans-serif;
    --hl-font-display: Georgia, "Times New Roman", serif;
    --hl-font-mono: Consolas, "Courier New", monospace;
    --hl-text-xs: .75rem;
    --hl-text-sm: .875rem;
    --hl-text-base: 1rem;
    --hl-text-lg: 1.125rem;
    --hl-text-xl: 1.375rem;
    --hl-text-2xl: 1.75rem;
    --hl-text-3xl: clamp(2rem, 3.1vw, 2.875rem);
    --hl-text-hero: clamp(2.75rem, 4.5vw, 4.5rem);
    --hl-leading-body: 1.75;
    --hl-leading-heading: 1.1;
    --hl-tracking-heading: -.045em;
    --hl-tracking-label: .14em;
    --hl-weight-normal: 400;
    --hl-weight-medium: 500;
    --hl-weight-semibold: 600;

    --hl-space-1: .25rem;
    --hl-space-2: .5rem;
    --hl-space-3: .75rem;
    --hl-space-4: 1rem;
    --hl-space-5: 1.5rem;
    --hl-space-6: 2rem;
    --hl-space-7: 3rem;
    --hl-space-8: 4rem;
    --hl-space-9: 6rem;
    --hl-radius-sm: .375rem;
    --hl-radius-md: .75rem;
    --hl-radius-lg: 1.25rem;
    --hl-radius-pill: 999px;
    --hl-radius-arch: 48% 48% var(--hl-radius-sm) var(--hl-radius-sm);
    --hl-shadow: 0 8px 28px var(--hl-shadow-color);
    --hl-page-width: 80rem;
    --hl-gutter: clamp(1.25rem, 5vw, 4.5rem);
    --hl-section-space: clamp(3.5rem, 6vw, 6rem);
    --hl-motion-fast: 160ms;
}

/* Optional studio directions. The production semantic theme stays Warm linen. */
:root {
    --hl-grove-mist: #edf0e8;
    --hl-grove-forest: #42624d;
    --hl-grove-sage: #9dad92;
    --hl-grove-oat: #dfd3b5;
    --hl-grove-pine: #283d32;
    --hl-grove-surface: #fcfdf8;
    --hl-grove-line: #cbd4c6;
    --hl-grove-muted: #5b6b5c;
    --hl-blue-cloud: #eef0f5;
    --hl-blue-dusk: #4f607e;
    --hl-blue-lilac: #adadc4;
    --hl-blue-peach: #e1b9a3;
    --hl-blue-night: #2d3547;
    --hl-blue-surface: #fdfdff;
    --hl-blue-line: #cdd2df;
    --hl-blue-muted: #616879;
    --hl-studio-micro: .625rem;
}