/*
 * Design system tokens. Defaults are the "Quiet Luxury" preset.
 * Header.php overrides these with current store_settings values via
 * an inline <style> block injected at page render.
 *
 * See docs/superpowers/specs/2026-05-13-redesign-umbrella-design.md §6
 */

:root {
    /* Color */
    --color-bg: #F2EFEA;
    --color-surface: #FFFFFF;
    --color-text: #1A1A1A;
    --color-text-muted: #6E6E6E;
    --color-primary: #1A1A1A;
    --color-primary-soft: #3A3A3A;
    --color-accent: #7A6D5E;
    --color-accent-soft: #C9A378;
    --color-border: #E8E4DC;

    /* Typography */
    --font-heading: "Times New Roman", Georgia, serif;
    --font-body: "Inter", system-ui, sans-serif;

    /* Type scale (responsive via clamp) */
    --text-display: clamp(40px, 5vw, 56px);
    --text-h1:      clamp(28px, 3.5vw, 40px);
    --text-h2:      clamp(22px, 2.5vw, 28px);
    --text-h3:      clamp(18px, 1.8vw, 20px);
    --text-body:    clamp(15px, 1.1vw, 16px);
    --text-small:   13px;
    --text-label:   11px;

    /* Spacing scale (4px 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;
    --space-10: 128px;
    --space-11: 160px;
    --space-12: 192px;

    /* Radii — editorial uses sharp corners except for pills */
    --radius-default: 0px;
    --radius-pill: 999px;

    /* Borders */
    --border-hairline: 1px solid var(--color-border);

    /* Transitions */
    --transition-default: 200ms ease-out;

    /* Layout */
    --container-max: 1440px;
    --container-pad: clamp(16px, 4vw, 48px);

    /* Aspect ratios */
    --aspect-product: 4 / 5;
    --aspect-hero: 16 / 9;

    /* Z-index scale */
    --z-banner: 100;
    --z-nav: 110;
    --z-drawer: 200;
    --z-modal: 300;
    --z-toast: 400;
}