/* ==========================================================================
   Eefje — Design tokens ("Aarde")
   Single source of truth. Everything visual references these custom
   properties; never hard-code ad-hoc hexes in component/page CSS.
   Derived from docs/design_handoff_eefje_website/DESIGN_SYSTEM.md
   ========================================================================== */

:root {
    /* ---- Colour: the Aarde palette (deep -> light) ---- */
    --grond: #34211a;      /* darkest ground; dark sections, text on light */
    --oxbloed: #5a2417;    /* deep support; bands, featured cards */
    --kleigrond: #b25a38;  /* PRIMARY accent — CTAs, links, clay world */
    --oker: #c4863b;       /* warmth, batik accent (Indo) */
    --zand: #d9bc93;       /* soft warmth, gold accent surfaces */
    --room: #f1e6d4;       /* primary light surface / paper */

    /* ---- Support tints ---- */
    --room-2: #fff6ea;         /* warmer card surface on room */
    --grond-tint: #3f2a20;     /* raised cards on grond */
    --line-warm: #ddc9a8;      /* hairline dividers on light */
    --line-warm-2: #e7d6ba;    /* list row separators on room-2 */
    --muted-brown: #7a5540;    /* muted body text on light */
    --muted-brown-2: #a07a5f;  /* eyebrow/labels, muted */
    --dot-gold: #c9a15f;       /* divider dots, dotted leaders */
    --paper-hi: #f6d9b8;       /* light melati watermark on grond */

    /* ---- Text on dark (room alphas) ---- */
    --on-dark-90: rgba(241, 230, 212, 0.9);
    --on-dark-85: rgba(241, 230, 212, 0.85);
    --on-dark-82: rgba(241, 230, 212, 0.82);
    --on-dark-75: rgba(241, 230, 212, 0.75);
    --on-dark-70: rgba(241, 230, 212, 0.7);
    --on-dark-60: rgba(241, 230, 212, 0.6);
    --on-dark-55: rgba(241, 230, 212, 0.55);

    /* ---- Borders on dark ---- */
    --border-dark-25: rgba(241, 230, 212, 0.25);
    --border-dark-22: rgba(241, 230, 212, 0.22);
    --border-dark-18: rgba(241, 230, 212, 0.18);
    --border-dark-15: rgba(241, 230, 212, 0.15);
    --input-fill-dark: rgba(241, 230, 212, 0.07);

    /* ---- Typography ---- */
    --font-wordmark: 'Bricolage Grotesque', sans-serif; /* wordmark only */
    --font-display: 'Cormorant Garamond', Georgia, serif; /* headings, quotes */
    --font-body: 'Hanken Grotesk', system-ui, sans-serif; /* everything else */

    /* Fluid display scale — clamp(min @≤640px, preferred, max desktop) */
    --fs-hero: clamp(2.75rem, 1.2rem + 7.7vw, 7rem);      /* 44 -> 112 */
    --fs-hero-sm: clamp(2.5rem, 1.4rem + 5.5vw, 6rem);    /* 40 -> 96 */
    --fs-h1: clamp(2.375rem, 1.5rem + 3.9vw, 3.75rem);    /* 38 -> 60 */
    --fs-h2: clamp(1.9rem, 1.15rem + 3.4vw, 3.625rem);    /* ~30 -> 58 */
    --fs-h2-sm: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);  /* 28 -> 52 */
    --fs-display-md: clamp(1.6rem, 1.1rem + 2.2vw, 2.625rem); /* 26 -> 42 */
    --fs-card-title: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem); /* 26 -> 38 */
    --fs-quote: clamp(1.35rem, 1.05rem + 1.1vw, 1.875rem);/* ~22 -> 30 */

    /* Body scale */
    --fs-body-lg: 1.25rem;   /* 20 */
    --fs-body: 1.0625rem;    /* 17 */
    --fs-body-sm: 0.9375rem; /* 15 */
    --fs-meta: 0.9375rem;    /* 15 */
    --fs-eyebrow: 0.8125rem; /* 13 */

    /* ---- Spacing scale (8px-ish rhythm) ---- */
    --sp-4: 4px;   --sp-8: 8px;   --sp-10: 10px; --sp-14: 14px;
    --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-22: 22px;
    --sp-24: 24px; --sp-26: 26px; --sp-30: 30px; --sp-34: 34px;
    --sp-40: 40px; --sp-56: 56px; --sp-64: 64px; --sp-70: 70px;
    --sp-80: 80px; --sp-90: 90px;

    /* ---- Layout ---- */
    --container: 1180px;
    --gutter: 40px;         /* side padding desktop */
    --gutter-sm: 22px;      /* side padding <=760px */

    /* ---- Radius ---- */
    --r-pill: 100px;
    --r-card: 24px;
    --r-input: 12px;
    --r-arch: 999px 999px 22px 22px;
    --r-letter: 6px;

    /* ---- Shadow / elevation (warm-tinted) ---- */
    --sh-card: 0 14px 30px rgba(90, 36, 23, 0.12);
    --sh-card-hover: 0 18px 38px rgba(90, 36, 23, 0.2);
    --sh-featured: 0 20px 46px rgba(52, 33, 26, 0.18);
    --sh-letter: 0 30px 70px rgba(0, 0, 0, 0.35);
    --sh-stamp: 0 8px 20px rgba(52, 33, 26, 0.3);
    --sh-badge: 0 6px 16px rgba(52, 33, 26, 0.28);

    /* ---- Motion ---- */
    --ease-settle: cubic-bezier(0.22, 0.61, 0.21, 1);
    --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);   /* overshoots a little, then settles */
    --dur-hover: 0.2s;
}