/* ============================================================
   DESIGN TOKENS — Spaces & Beyond Real Estate
   Single source of truth for all design variables
   ============================================================ */

:root {
    /* --- Colors --- */
    --color-gold: #c9a84c;
    --color-gold-light: #e8d5a3;
    --color-gold-dark: #9b7b2e;
    --color-gold-ghost: rgba(201, 168, 76, 0.08);
    --color-gold-subtle: rgba(201, 168, 76, 0.15);
    --color-gold-border: rgba(201, 168, 76, 0.3);

    --color-black: #000000;
    --color-black-soft: #111111;
    --color-black-mid: #1a1a1a;
    --color-black-card: #141414;

    --color-white: #ffffff;

    /* Light-theme sections (About, Team) — Luxhabitat-style cream */
    --color-cream: #f6f3ed;
    --color-cream-card: #ffffff;
    --color-teal: #16303d;
    --color-teal-light: #1e4152;
    --color-ink: #18150f;
    --color-ink-soft: rgba(24, 21, 15, 0.62);
    --color-ink-faint: rgba(24, 21, 15, 0.42);
    --color-ink-border: rgba(24, 21, 15, 0.12);
    --color-white-soft: #f0ede6;
    --color-gray: #c9c9c9;
    --color-gray-light: #ededed;
    --color-gray-border: rgba(255, 255, 255, 0.06);

    /* --- Typography --- */
    --font-display: "Cormorant Garamond", serif;
    --font-sans: "Tenor Sans", sans-serif;
    --font-body: "Montserrat", sans-serif;

    /* --- Font Sizes (fluid) ---
       INCREASED across the board for better readability
       Old → New
       0.60rem → 0.80rem  (xs  — labels, eyebrows, nav links)
       0.72rem → 0.90rem  (sm  — captions, tags, small copy)
       0.82rem → 1.00rem  (base — body paragraphs)
       1.00rem → 1.15rem  (md  — slightly larger body)
       1.40rem → 1.65rem  (lg  — card titles, sub-headings)
       1.80rem → 2.10rem  (xl  — mid-size headings)
       2.40rem → 2.80rem  (2xl — large headings)
       hero stays fluid via clamp, bumped min and max
  ---------------------------------------------------------------- */
    --text-xs: 0.8rem; /* was 0.60rem — nav, labels, eyebrows, tags */
    --text-sm: 0.9rem; /* was 0.72rem — captions, specs, small copy */
    --text-base: 1rem; /* was 0.82rem — all body / paragraph text   */
    --text-md: 1.15rem; /* was 1.00rem — slightly larger body         */
    --text-lg: 1.65rem; /* was 1.40rem — card titles, sub-headings    */
    --text-xl: 2.1rem; /* was 1.80rem — mid-size section headings    */
    --text-2xl: 2.8rem; /* was 2.40rem — large headings               */
    --text-hero: clamp(3.6rem, 8vw, 7.2rem); /* was clamp(3rem,7vw,6.5rem) */

    /* --- Spacing --- */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 60px;
    --space-2xl: 80px;
    --space-3xl: 120px;

    /* --- Section Padding (responsive via clamp) --- */
    --section-y: clamp(60px, 10vw, 120px);
    --section-x: clamp(20px, 5vw, 60px);

    /* --- Transitions --- */
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.2s;
    --duration-base: 0.35s;
    --duration-slow: 0.6s;
    --duration-slower: 0.9s;

    /* --- Border Radius --- */
    --radius-none: 0px;
    --radius-sm: 4px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.4);
    --shadow-hover:
        0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--color-gold-subtle);
    --shadow-gold: 0 8px 32px rgba(201, 168, 76, 0.25);

    /* --- Z-index scale --- */
    --z-base: 1;
    --z-above: 10;
    --z-nav: 100;
    --z-float: 200;
    --z-cursor: 999;
}