/* =====================================================================
   GRETHORIA — Design Tokens (SINGLE SOURCE OF TRUTH)
   Do NOT redefine these values in component files. Reference the vars.
   ===================================================================== */

:root {
    /* ---- Brand greens ---- */
    --color-forest: #334738;
    --color-forest-dark: #26362C;
    --color-forest-deep: #1F2D24;

    /* ---- Sage ---- */
    --color-sage: #7B8B78;
    --color-sage-light: #ABB5A5;

    /* ---- Neutrals / paper ---- */
    --color-cream: #F5F1E8;
    --color-cream-light: #FAF8F3;
    --color-paper: #FCFBF7;
    --color-white: #FFFFFF;

    /* ---- Ink / text ---- */
    --color-ink: #20201D;
    --color-text: #36352F;
    --color-muted: #76736B;

    /* ---- Borders ---- */
    --color-border: #DDD8CD;
    --color-border-light: #EAE6DC;

    /* ---- Accents ---- */
    --color-spice: #AF5E37;
    --color-spice-dark: #87462C;
    --color-gold: #B89A62;
    --color-sale: #A94732;

    /* ---- Surfaces used by cards / media ---- */
    --color-media: #F1EDE4;
    --color-footer: #293A2F;
    --color-footer-text: #F4F0E7;
    --color-story-bg: #F0ECE1;
    --color-newsletter-bg: #EAE3D5;

    /* ---- Layout ---- */
    --container: 1440px;

    /* ---- Spacing scale ---- */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 72px;
    --space-3xl: 112px;

    /* ---- Section rhythm ---- */
    --section-y: 90px;
    --section-y-editorial: 112px;

    /* ---- Radius (kept minimal — NOT a SaaS look) ---- */
    --radius-sm: 2px;
    --radius-md: 4px;

    /* ---- Shadow (used sparingly) ---- */
    --shadow-soft: 0 10px 30px rgba(20, 25, 20, .05);

    /* ---- Transitions ---- */
    --transition-fast: .2s ease;
    --transition-normal: .35s ease;
    --transition-slow: .7s cubic-bezier(.2, .6, .2, 1);

    /* ---- Typography ---- */
    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body: "Inter", Arial, sans-serif;

    /* ---- Header ---- */
    --announcement-height: 32px;
    --header-height: 78px;
    --z-header: 100;
    --z-drawer: 200;
    --z-overlay: 300;
    --z-float: 150;
}