/* ============================================================
   Latteland Design Tokens, DS1 "Cottagecore-Noir"
   Derived from stitch-source/latteland_1/DESIGN.md
   Hand-authored. No framework, no build step.
   ============================================================ */

:root {
    /* ---- Surfaces (deep forest / obsidian) ---- */
    --surface:            #011800; /* page base */
    --surface-dim:        #001200;
    --surface-1:          #062104; /* container-low */
    --surface-2:          #0a2506; /* container */
    --surface-3:          #153010; /* container-high */
    --surface-4:          #203b1a; /* container-highest */
    --surface-bright:     #25401e;

    /* ---- Glass panels ---- */
    --panel:              rgba(26, 46, 26, 0.72);  /* deep-forest glass */
    --panel-hover:        rgba(26, 46, 26, 0.86);
    --panel-solid:        #112a0d;
    --panel-border:       rgba(208, 233, 203, 0.16);
    --panel-border-bright:rgba(208, 233, 203, 0.38);
    --blur:               14px;

    /* ---- Text ---- */
    --text:               #e7f3df; /* warm cream-green, high legibility */
    --text-soft:          #c3c8bf;
    --text-muted:         #9eb398;
    --on-accent:          #1d1600; /* text on gold */

    /* ---- Brand accents ---- */
    --sage:               #7f977c;
    --sage-soft:          rgba(127, 151, 124, 0.18);
    --gold:               #d4af37; /* muted gold, CTA only (per DESIGN.md) */
    --gold-strong:        #e6c455;
    --gold-soft:          rgba(212, 175, 55, 0.14);
    --cream:              #fdf6e3;

    /* ---- Status ---- */
    --live:               #bfe7a8;
    --live-bg:            rgba(156, 214, 131, 0.16);
    --live-border:        rgba(156, 214, 131, 0.40);
    --soon:               #d7cfb6;
    --soon-bg:            rgba(160, 150, 120, 0.16);
    --soon-border:        rgba(180, 170, 140, 0.32);

    /* ---- Typography ---- */
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-display:   2.5rem;  /* 40; bumped to 56 at >=768px (see media query below) */
    --fs-h2:        1.75rem; /* 28; bumped to 40 at >=768px */
    --fs-h3:        1.5rem;                                  /* 24-28 */
    --fs-body-lg:   1.125rem; /* 18 */
    --fs-body:      1rem;     /* 16 */
    --fs-label:     0.875rem; /* 14 */
    --fs-label-sm:  0.75rem;  /* 12 */

    --lh-tight:     1.1;
    --lh-snug:      1.25;
    --lh-body:      1.6;
    --tracking-wide: 0.05em;

    /* ---- Spacing (8px base scale from DESIGN.md) ---- */
    --space-xs: 4px;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;
    --gutter:   24px;
    --container: 1280px;
    --container-narrow: 960px;

    /* ---- Radii ---- */
    --r-sm:   4px;
    --r:      8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-full: 9999px;

    /* ---- Depth (tonal, no heavy shadows) ---- */
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md:  0 14px 40px rgba(0, 0, 0, 0.38);
    --shadow-lg:  0 28px 70px rgba(0, 0, 0, 0.45);
    --text-shadow-hero: 0 4px 18px rgba(0, 0, 0, 0.55);

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur:  0.25s;
    --dur-slow: 0.5s;

    --header-h: 92px;
}

/* Responsive type scale (replaces clamp() for older-browser support) */
@media (min-width: 768px) {
    :root {
        --fs-display: 3.5rem; /* 56 */
        --fs-h2:      2.5rem; /* 40 */
    }
}