/* =====================================================
   TranslateXYZ — Design Tokens
   All design values live here. Use var(--token) everywhere.
   ===================================================== */

:root {

    /* ---------- BRAND COLORS — green ---------- */
    --green-50:  #EFFFEF;
    --green-100: #DCFBDC;
    --green-200: #B7FDB7;
    --green-300: #86F186;
    --green-400: #4FD64F;
    --green-500: #30B230;   /* CTA, accent text on dark */
    --green-600: #239023;   /* hover */
    --green-700: #1A6F1A;   /* AAA on white */
    --green-800: #114B11;
    --green-900: #002200;   /* deep brand */
    --green-950: #001400;

    /* ---------- ACCENT — cyan ---------- */
    --cyan-50:  #F1FCFF;
    --cyan-100: #DCF6FE;
    --cyan-300: #6FDFFB;
    --cyan-500: #01B5EC;
    --cyan-600: #0397C5;    /* AA text on white */
    --cyan-700: #066F92;

    /* ---------- ACCENT — amber (offers/discount) ---------- */
    --amber-50:  #FFFCF4;
    --amber-100: #FFF4D2;
    --amber-300: #F5DD66;
    --amber-500: #E9C513;   /* offer chip · dark only */
    --amber-600: #B89A0E;   /* AA text on white */
    --amber-700: #8C7508;

    /* ---------- NEUTRALS ---------- */
    --neutral-0:   #FFFFFF;
    --neutral-50:  #F8F9F8;
    --neutral-100: #F1F2F1;
    --neutral-200: #E5E6E5;   /* border default */
    --neutral-300: #CDD0CD;
    --neutral-400: #8B8F8B;   /* subtle text */
    --neutral-500: #5C605C;
    --neutral-600: #3F423F;   /* body */
    --neutral-700: #2A2C2A;
    --neutral-800: #1C1D1C;
    --neutral-900: #131413;   /* headings */

    /* ---------- SEMANTIC: BACKGROUNDS ---------- */
    --bg-light:         var(--neutral-0);
    --bg-light-subtle:  var(--neutral-50);
    --bg-light-muted:   var(--neutral-100);
    --bg-dark:          #0A1A0A;     /* hero/header/footer */
    --bg-dark-elev:     #16291A;     /* dark cards */
    --bg-dark-elev-2:   #1F3A24;

    /* ---------- SEMANTIC: TEXT ---------- */
    --text-on-light-strong: var(--neutral-900);   /* headings */
    --text-on-light:        var(--neutral-600);   /* body */
    --text-on-light-muted:  var(--neutral-400);
    --text-on-dark-strong:  #FFFFFF;
    --text-on-dark:         #D6E0D6;
    --text-on-dark-muted:   #93A293;

    /* ---------- SEMANTIC: BORDERS ---------- */
    --border-light:         var(--neutral-200);
    --border-light-strong:  var(--neutral-300);
    --border-dark:          rgba(255,255,255,0.08);
    --border-dark-strong:   rgba(255,255,255,0.18);

    /* ---------- SEMANTIC: BRAND ---------- */
    --color-brand:        var(--green-500);
    --color-brand-hover:  var(--green-600);
    --color-brand-deep:   var(--green-700);
    --color-link:         var(--green-700);
    --color-link-hover:   var(--green-600);
    --color-link-on-dark: var(--green-300);

    /* ---------- SHADOWS (green-tinted) ---------- */
    --sh-sm:   0 1px 3px  rgba(15,30,15,.08), 0 1px 2px rgba(15,30,15,.04);
    --sh-md:   0 4px 12px rgba(15,30,15,.08), 0 2px 4px rgba(15,30,15,.05);
    --sh-lg:   0 12px 32px rgba(15,30,15,.10), 0 4px 8px rgba(15,30,15,.06);
    --sh-xl:   0 24px 48px rgba(15,30,15,.14), 0 8px 16px rgba(15,30,15,.08);
    --sh-focus: 0 0 0 3px rgba(48,178,48,.35);
    --sh-card:  var(--sh-md);

    /* ---------- RADII ---------- */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   16px;
    --r-xl:   22px;
    --r-pill: 999px;

    /* ---------- TYPOGRAPHY ---------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* font sizes — slightly larger than default for readability */
    --fs-xs:    13px;
    --fs-sm:    14px;
    --fs-base:  16.5px;
    --fs-md:    17.5px;
    --fs-lg:    19px;
    --fs-xl:    22px;
    --fs-2xl:   28px;
    --fs-3xl:   36px;
    --fs-4xl:   46px;
    --fs-5xl:   58px;
    --fs-6xl:   72px;

    /* font weights */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-extra:    800;

    /* line heights */
    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-base:    1.55;
    --lh-relaxed: 1.7;

    /* letter spacing */
    --ls-tight:  -0.01em;
    --ls-tighter:-0.02em;
    --ls-wide:   0.04em;
    --ls-wider:  0.08em;

    /* ---------- SPACING (4-base scale) ---------- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-7:  32px;
    --sp-8:  40px;
    --sp-9:  48px;
    --sp-10: 64px;
    --sp-11: 80px;
    --sp-12: 96px;
    --sp-13: 128px;

    /* ---------- LAYOUT ---------- */
    --container-max: 1200px;
    --container-pad: 24px;
    --section-py: 96px;          /* section vertical padding (desktop) */
    --section-py-sm: 64px;       /* tighter sections */

    /* ---------- TRANSITIONS ---------- */
    --t-fast:  150ms cubic-bezier(.4,0,.2,1);
    --t-base:  220ms cubic-bezier(.4,0,.2,1);
    --t-slow:  360ms cubic-bezier(.4,0,.2,1);

    /* ---------- Z-INDEX SCALE ---------- */
    --z-base:    1;
    --z-raised:  10;
    --z-sticky:  100;
    --z-header:  200;
    --z-overlay: 800;
    --z-modal:   900;
    --z-toast:   1000;

    /* ---------- HEADER SIZES ---------- */
    --header-h:         84px;   /* default */
    --header-h-shrunk:  64px;   /* after scroll */

}

/* ---------- BREAKPOINT TOKENS (informational; use @media px directly) ----------
   --bp-sm:  640px
   --bp-md:  768px
   --bp-lg:  1024px
   --bp-xl:  1200px
   --bp-2xl: 1440px
------------------------------------------------------------------------------- */

/* ---------- RESPONSIVE OVERRIDES ---------- */
@media (max-width: 1024px) {
    :root {
        --section-py: 72px;
        --section-py-sm: 48px;
        --fs-3xl: 30px;
        --fs-4xl: 38px;
        --fs-5xl: 46px;
        --fs-6xl: 54px;
    }
}
@media (max-width: 640px) {
    :root {
        --section-py: 56px;
        --section-py-sm: 40px;
        --container-pad: 16px;
        --header-h: 64px;
        --header-h-shrunk: 56px;
        --fs-2xl: 24px;
        --fs-3xl: 26px;
        --fs-4xl: 32px;
        --fs-5xl: 38px;
        --fs-6xl: 44px;
    }
}