/* ==========================================================================
   Al Saad — Design Tokens
   Single source of truth. Change a value here, it updates site-wide.
   Values taken from the Figma variables/exported styles.
   ========================================================================== */

:root {
    /* ---- Brand colors (exact hex from Figma) ---- */
    --color-white:      #ffffff;
    --color-black:      #131313;   /* --BLACK */
    --color-ink:        #090909;   /* headings on light backgrounds */
    --color-ink-2:      #19191b;   /* accordion numbers/titles */
    --color-d-brown:    #301d17;   /* --D-Brown : dark sections, footer, form */
    --color-l-brown:    #efe0d5;   /* --L-Brown : cream sections */
    --color-muted:      #717171;   /* eyebrow label gray */
    --color-stone:      #a59a97;   /* stat caption on dark */

    /* Neutral stones used across the design */
    --color-stone-700:  #44403c;
    --color-stone-800:  #292524;
    --color-stone-400:  #a8a29e;
    --color-neutral-500:#717171;
    --color-neutral-950:#090909;
    --color-zinc-900:   #18181b;

    /* ---- Tokens NOT provided as exact hex in the export ----
       These three (CTA / Red / Stroke) had no value in the Figma dump.
       Adjust here to the exact brand values when you have them. */
    --color-cta:        #5d4139;               /* primary button fill (brand CTA) */
    --color-red:        #c1440e;               /* active slider/pagination accent */
    --color-stroke:     rgba(255,255,255,.20); /* outline on dark surfaces */
    --color-stroke-dark: rgba(48,29,23,.20);   /* outline on light surfaces */

    /* ---- Semantic aliases ---- */
    --bg-page:          var(--color-white);
    --bg-cream:         var(--color-l-brown);
    --bg-dark:          var(--color-d-brown);
    --bg-stone:         var(--color-stone-800);

    --text-on-dark:     var(--color-white);
    --text-on-light:    var(--color-ink);
    --text-eyebrow:     var(--color-muted);
    --text-caption:     var(--color-stone);

    /* ---- Typography ---- */
    --font-heading: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
    --font-body:    "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fw-light:   300;
    --fw-regular: 400;
    --fw-medium:  500;

    /* Fluid type scale — clamp(min, preferred, max).
       The vw middle-term is tuned so the design reaches the exact Figma
       sizes at ~1440–1512px, then scales down gracefully below that. */
    --fs-eyebrow:  clamp(1.125rem, 1.7vw, 1.5rem);   /* 24px */
    --fs-body:     clamp(1.125rem, 1.7vw, 1.5rem);   /* 24px */
    --fs-body-sm:  clamp(1rem,     1.45vw, 1.25rem); /* 20px */
    --fs-h2:       clamp(2.25rem,  3.4vw, 3rem);     /* 48px */
    --fs-h1:       clamp(2.75rem,  5.2vw, 4.625rem); /* 74px */
    --fs-stat:     clamp(2.75rem,  4.6vw, 4rem);     /* 64px */
    --fs-stat-lg:  clamp(3.25rem,  6.1vw, 5.375rem); /* 86px */
    --fs-ghost:    clamp(5rem,     13vw,  12.5rem);  /* 200px ghost numerals */

    /* ---- Spacing scale ---- */
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ---- Layout ---- */
    --container-max: 1392px;   /* inner content width from the design */
    --gutter:        clamp(1.25rem, 4vw, 3.5rem);

    /* ---- Radii ---- */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    /* ---- Effects ---- */
    --transition: .25s ease;
    --ring: 0 0 0 1px var(--color-stroke-dark);

    /* Brand shield silhouette (used as the marquee separator via mask) */
    --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 1 L22 5 V14 C22 20.6 17.8 25.2 12 27 C6.2 25.2 2 20.6 2 14 V5 Z' fill='%23000'/%3E%3C/svg%3E");
}