/*
 * ModernXscapes — design tokens
 * Mapped from Figma file OEuqenG7DJrs7QG9TVSI3G.
 * Designer used raw hex variables; we group them semantically here.
 */

:root {
    /* === Brand greens (the dominant palette) === */
    --mx-color-brand:        #77bc1e;   /* primary brand green — CTA */
    --mx-color-brand-alt:    #77b733;   /* CTA hover / variant */
    --mx-color-brand-deep:   #648e2e;
    --mx-color-brand-darker: #506d30;
    --mx-color-brand-darkest:#294a05;
    --mx-color-brand-mid:    #6e9347;
    --mx-color-brand-soft:   #7ab43d;
    --mx-color-brand-leaf:   #78b835;
    --mx-color-brand-olive:  #47681d;

    /* === Light greens / surfaces === */
    --mx-color-surface-1:    #ffffff;
    --mx-color-surface-2:    #fefefe;
    --mx-color-surface-tint: #f8ffed;   /* very light cream-green */
    --mx-color-surface-tint-2:#f5ffe9;
    --mx-color-surface-tint-3:#fdffe7;
    --mx-color-surface-leaf: #ebffe5;
    --mx-color-surface-leaf-2:#e8f4d9;
    --mx-color-surface-mint: #ddfadb;
    --mx-color-surface-mint-2:#c4ebc8;
    --mx-color-surface-mint-3:#b4e8ba;
    --mx-color-surface-lime: #d5ffa6;
    --mx-color-surface-lime-2:#daffa9;
    --mx-color-surface-lime-3:#c5ff88;
    --mx-color-surface-acid: #98ff2b;
    --mx-color-surface-soft-green:#9ad18f;

    /* === Neutrals (text + ui) === */
    --mx-color-text:         #000000;
    --mx-color-text-strong:  #39412f;
    --mx-color-text-muted:   #4c5748;
    --mx-color-text-meta:    #585f5b;
    --mx-color-text-mute-2:  #5f6856;
    --mx-color-text-mute-3:  #6b7362;
    --mx-color-text-mute-4:  #72786d;
    --mx-color-text-mute-5:  #b9c2b2;
    --mx-color-text-mute-6:  #a2a99d;
    --mx-color-text-cool:    #474b52;
    --mx-color-text-cool-2:  #3f454c;
    --mx-color-text-cool-3:  #a8a8a8;

    /* === Accents === */
    --mx-color-accent-amber: #ffca81;
    --mx-color-accent-purple:#2c11bf;

    /* === Hero gradient (top of page over hero image) === */
    --mx-hero-gradient: linear-gradient(
        to top,
        rgba(9, 26, 2, 0) 0%,
        rgba(11, 25, 14, 0.87) 100%
    );

    /* === Typography === */
    --mx-font-display: "TWK Lausanne", "TT Commons", -apple-system, sans-serif;
    --mx-font-heading: "TWK Lausanne", -apple-system, BlinkMacSystemFont, sans-serif;
    --mx-font-body:    "TT Commons", -apple-system, BlinkMacSystemFont, sans-serif;
    --mx-font-ui:      "TT Commons", -apple-system, sans-serif;

    /* Sizes — derived from Figma tokens, fluid where it makes sense */
    --mx-fs-display: clamp(48px, 7vw, 109px);
    --mx-fs-h1:      clamp(40px, 6vw, 99px);
    --mx-fs-h2:      clamp(36px, 5vw, 68px);
    --mx-fs-h3:      clamp(28px, 4vw, 60px);
    --mx-fs-h4:      clamp(22px, 2.6vw, 47px);
    --mx-fs-h5:      clamp(20px, 2.2vw, 39px);
    --mx-fs-lead:    clamp(18px, 1.6vw, 27px);
    --mx-fs-body:    16px;
    --mx-fs-body-lg: 18px;
    --mx-fs-small:   14px;
    --mx-fs-eyebrow: 16px;

    --mx-fw-light:   300;
    --mx-fw-regular: 400;
    --mx-fw-medium:  500;
    --mx-fw-semi:    600;
    --mx-fw-bold:    700;

    --mx-lh-tight:   1.05;
    --mx-lh-snug:    1.2;
    --mx-lh-normal:  1.5;
    --mx-lh-loose:   1.65;

    /* === Spacing === */
    --mx-space-2xs: 4px;
    --mx-space-xs:  8px;
    --mx-space-sm:  12px;
    --mx-space-md:  16px;
    --mx-space-lg:  24px;
    --mx-space-xl:  32px;
    --mx-space-2xl: 48px;
    --mx-space-3xl: 64px;
    --mx-space-4xl: 96px;
    --mx-space-5xl: 128px;

    /* === Radius === */
    --mx-radius-xs:   1px;
    --mx-radius-sm:   6px;
    --mx-radius-md:   8px;
    --mx-radius-lg:   13px;
    --mx-radius-xl:   15px;
    --mx-radius-2xl:  49px;
    --mx-radius-3xl:  100px;
    --mx-radius-pill: 9999px;

    /* === Shadow === */
    --mx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --mx-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --mx-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* === Container === */
    --mx-container-max: 1500px;       /* unified content max-width */
    --mx-container-pad: clamp(20px, 4vw, 50px);

    /* === Motion === */
    --mx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --mx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mx-dur-fast: 180ms;
    --mx-dur-base: 320ms;
    --mx-dur-slow: 600ms;
}