/* ============================================================
   W OUTDOOR LIVING — DESIGN TOKENS
   ============================================================ */

:root {
    /* ============================================
       FONT FAMILIES
       ============================================ */
    --font-display: the-seasons, Georgia, serif;
    --font-sans: inter-18pt, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* ============================================
       TYPOGRAPHY — Desktop (1025-1920px)
       ============================================ */
    --font-display-xl: clamp(44px, 1.8rem + 1.04vw, 60px);
    --font-display-l:  clamp(36px, 1.5rem + 0.83vw, 48px);
    --font-display-m:  clamp(30px, 1.31rem + 0.69vw, 40px);
    --font-display-s:  clamp(26px, 1.19rem + 0.42vw, 32px);
    --font-display-xs: clamp(22px, 1.13rem + 0.21vw, 26px);

    --font-xl: clamp(26px, 1.31rem + 0.42vw, 32px);
    --font-l:  clamp(22px, 1.19rem + 0.28vw, 26px);
    --font-m:  clamp(20px, 1.13rem + 0.14vw, 22px);
    --font-s:  clamp(18px, 1.06rem + 0.14vw, 20px);
    --font-xs: clamp(16px, 0.94rem + 0.14vw, 18px);
    --font-pl: clamp(16px, 0.94rem + 0.14vw, 18px);
    --font-pm: clamp(15px, 0.91rem + 0.07vw, 16px);
    --font-pr: clamp(13px, 0.81rem + 0.07vw, 14px);
    --font-ps: clamp(11px, 0.69rem + 0.07vw, 12px);

    /* ============================================
       LINE HEIGHT
       ============================================ */
    --lh-display-xl: 1.2;
    --lh-display-l:  1.2;
    --lh-display-m:  1.25;
    --lh-display-s:  1.3;
    --lh-display-xs: 1.35;

    --lh-xl: 1.2;
    --lh-l:  1.25;
    --lh-m:  1.3;
    --lh-r:  1.35;
    --lh-s:  1.4;
    --lh-xs: 1.45;
    --lh-pl: 1.45;
    --lh-pm: 1.5;
    --lh-pr: 1.55;
    --lh-ps: 1.5;

    /* ============================================
       LETTER SPACING
       ============================================ */
    --ls-tightest: -0.04em;
    --ls-tighter:  -0.025em;
    --ls-tight:    -0.015em;
    --ls-wide:     0.02em;
    --ls-wider:    0.05em;
    --ls-widest:   0.12em;

    /* ============================================
       SPACING — t-shirt scale, 400-1920 clamp
       ============================================ */
    --space-3xl: clamp(120px, 5.5rem + 6.94vw, 220px);
    --space-2xl: clamp(60px, 2.81rem + 5.53vw, 144px);
    --space-xl:  clamp(40px, 1.95rem + 4.21vw, 104px);
    --space-l:   clamp(30px, 1.53rem + 2.76vw, 72px);
    --space-m:   clamp(28px, 1.62rem + 1.58vw, 52px);
    --space-s:   clamp(24px, 1.36rem + 0.69vw, 36px);
    --space-xs:  clamp(18px, 1.0rem + 0.52vw, 26px);
    --space-2xs: clamp(12px, 0.61rem + 0.35vw, 18px);
    --space-3xs: clamp(8px, 0.4rem + 0.28vw, 12px);
    --space-4xs: clamp(4px, 0.18rem + 0.2vw, 8px);
    --space-5xs: 6px;

    /* ============================================
       COLOUR — System (primary brand)
       ============================================ */
    --color-granite:      #465D4B;
    --color-background:   #F2EFEC;
    --color-carbon-black: #1E2420;
    --color-accent:       #EDD9A6;

    /* ============================================
       COLOUR — Custom (extended palette)
       ============================================ */
    --color-white:        #F7F7F7;
    --color-grey:         #626462;
    --color-green:        #3A4D3E;
    --color-sage:         #9FB2A3;
    --color-clay:         #B78D6A;
    --color-mint:         #E5EBE8;
    --color-mushroom:     #A79F8A;
    --color-stone:        #CFC8B6;

    /* ============================================
       COLOUR — Semantic mappings
       ============================================ */
    --bg-light:      var(--color-background);
    --bg-dark:       var(--color-carbon-black);
    --bg-feature:    var(--color-granite);
    --bg-subtle:     var(--color-mint);
    --text-on-light: var(--color-carbon-black);
    --text-on-dark:  var(--color-white);
    --text-muted:    var(--color-grey);
    --accent:        var(--color-granite);
    --accent-warm:   var(--color-accent);

    /* ============================================
       BORDER RADIUS — buttons only
       ============================================ */
    --radius-xl: clamp(20px, 1rem + 1.04vw, 32px);
    --radius-l:  clamp(14px, 0.75rem + 0.52vw, 20px);
    --radius-m:  clamp(10px, 0.55rem + 0.35vw, 14px);
    --radius-s:  6px;

    /* ============================================
       BUTTONS — padding scales
       ============================================ */
    --btn-py:   clamp(12px, 0.65rem + 0.28vw, 16px);
    --btn-px:   clamp(24px, 1.25rem + 0.83vw, 36px);
    --btn-py-s: clamp(8px, 0.4rem + 0.2vw, 10px);
    --btn-px-s: clamp(18px, 0.95rem + 0.55vw, 26px);
    --btn-py-l: clamp(16px, 0.85rem + 0.35vw, 20px);
    --btn-px-l: clamp(32px, 1.65rem + 1vw, 48px);

    /* ============================================
       ANIMATION — Durations & Easings
       ============================================ */
    --dur-fast:   0.3s;
    --dur-normal: 0.6s;
    --dur-slow:   0.9s;

    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-snap:  cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================
       ELEMENTOR ANIMATION OVERRIDES
       ============================================ */
    --anim-distance: 24px;
    --anim-duration: 1.8s;
    --anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   MOBILE OVERRIDES — 400-1024px
   ============================================ */
@media (max-width: 1024px) {
    :root {
        --font-display-xl: clamp(36px, 1.5rem + 2vw, 48px);
        --font-display-l:  clamp(32px, 1.5rem + 1.28vw, 40px);
        --font-display-m:  clamp(28px, 1.5rem + 0.64vw, 34px);
        --font-display-s:  clamp(24px, 1.35rem + 0.32vw, 28px);
        --font-display-xs: clamp(22px, 1.27rem + 0.16vw, 24px);

        --font-xl: clamp(24px, 1.27rem + 0.64vw, 28px);
        --font-l:  clamp(20px, 1.18rem + 0.32vw, 24px);
        --font-m:  clamp(19px, 1.13rem + 0.16vw, 21px);
        --font-s:  clamp(17px, 1.04rem + 0.16vw, 19px);
        --font-xs: clamp(16px, 0.99rem + 0.16vw, 17px);
        --font-pl: clamp(16px, 0.99rem + 0.16vw, 17px);
        --font-pm: clamp(14px, 0.86rem + 0.16vw, 15px);
        --font-pr: clamp(12px, 0.66rem + 0.32vw, 14px);
        --font-ps: clamp(10px, 0.52rem + 0.32vw, 12px);
    }
}