/* ============================================================
   tokens.css — design variables (colors, fonts, spacing, etc.)
   ============================================================ */

:root {
    /* ---------- COLORS ---------- */
    /* Brand palette derived from cedarwam.com live site (May 2026 audit). */
    --color-teal:        #33625C;   /* "Invest With Cedarwood" section background */
    --color-teal-dark:   #284A45;   /* hover / pressed state for teal */
    --color-mint:        #33CC85;   /* Cedarwood Development brand block */
    --color-mint-dark:   #27A66A;
    --color-blue:        #1B6FB8;   /* vertical card headings (Hospitality, Single-Family, etc.) */
    --color-cream:       #F4E9DC;   /* subtle warm accent (header strip on hero) */
    --color-cream-soft:  #F8F0E5;

    --color-ink:         #111111;   /* primary text */
    --color-ink-soft:    #3A3A3A;
    --color-ink-mute:    #5C5C5C;
    --color-line:        #E5E5E5;

    --color-white:       #FFFFFF;
    --color-off-white:   #FAFAFA;

    --color-overlay-card-dark:  rgba(40, 47, 51, 0.70);   /* hero card backdrop */
    --color-overlay-card-light: rgba(255, 255, 255, 0.95);

    /* ---------- FONTS ---------- */
    /* Wix's site uses commercial Lulo Clean (display caps) + Avenir LT Light (body).
       Google Fonts substitutes selected for closest visual match:
       - Big Shoulders Display  → Lulo Clean replacement (geometric display, wide caps)
       - Montserrat             → Avenir LT replacement (humanist sans, supports light)
       - Cormorant Garamond it. → italic serif used in footer brand line */
    --font-display:     'Big Shoulders Display', 'Impact', 'Bebas Neue', system-ui, sans-serif;
    --font-body:        'Montserrat', 'Avenir Next', 'Avenir', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-script:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    /* ---------- TYPE SCALE ---------- */
    --fs-display-xl:    clamp(3rem, 6vw + 1rem, 5.75rem);   /* hero title */
    --fs-display-lg:    clamp(2.5rem, 4.5vw + 1rem, 4.25rem);
    --fs-display-md:    clamp(2rem, 3vw + 1rem, 3rem);      /* section titles */
    --fs-h2:            clamp(1.5rem, 1.5vw + 1rem, 2rem);
    --fs-h3:            1.125rem;
    --fs-body:          1rem;
    --fs-small:         0.875rem;
    --fs-xs:            0.75rem;

    --lh-tight:         1.15;
    --lh-snug:          1.35;
    --lh-normal:        1.6;
    --lh-loose:         1.85;

    --ls-display:       0.06em;     /* letter-spacing for display caps */
    --ls-display-wide:  0.18em;     /* "CEDARWOOD DEVELOPMENT" extra spacing */

    /* ---------- SPACING ---------- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;
    --space-3xl: 8rem;

    /* ---------- LAYOUT ---------- */
    --container-narrow: 720px;
    --container-base:   1200px;
    --container-wide:   1440px;
    --header-height:    72px;

    /* ---------- RADIUS / BORDER ---------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --border-thin:  1px solid var(--color-line);

    /* ---------- ELEVATION ---------- */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 18px 50px rgba(0,0,0,0.14);

    /* ---------- MOTION ---------- */
    --t-fast: 120ms;
    --t-base: 220ms;
    --t-slow: 380ms;
    --ease:   cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- Z-INDEX ---------- */
    --z-base:    1;
    --z-overlay: 10;
    --z-header:  100;
    --z-modal:   1000;
    --z-toast:   2000;
}