/* ==========================================================================
   Two Wrens design tokens

   Source of truth: design-reference/two-wrens-homepage-v2-navy.png

   The reference is a 1024x682 crop. Container gutters of 57px against a 914px
   content width identify it as a 1440px viewport with a 1280px container
   (1024/1440 = 0.7111), so every measurement below was taken at 1024 and
   multiplied by 1.40625 to reach CSS pixels.

   "measured solid" = sampled from a flat fill, reliable
   "measured text"  = sampled from anti-aliased glyphs, approximate at this
                      resolution; confirm against a full-size export
   ========================================================================== */

:root {
    /* ---------- Surfaces ---------- */
    --navy: #0E1726; /* measured solid: hero band                    */
    --navy-panel: #08101D; /* measured solid: "I help you" card, darker    */
    --navy-deep: #080E18; /* derived: footer, sits under the panel       */
    --surface-page: #FFFFFF; /* measured solid: header + section fields      */
    --surface-strip: #F7F8FA; /* measured solid: stats strip, cool light grey */
    --surface-card: #FFFFFF;
    --surface-tint: #F3F6F3; /* derived: soft green-grey for icon pads      */

    /* ---------- Greens ----------
       The design deliberately runs several greens. The two solid fills are
       measured reliably; the on-navy accents are read from large glyphs. */
    --green-deep: #07652A; /* measured solid: header CTA, step circles     */
    --green-deep-hover: #054F20; /* derived                                      */
    /* Olive darkened from the reference sample so white label text meets AA
       (4.5:1). Hover steps further down the same family. */
    --green-olive: #4E7338;
    --green-olive-hover: #3F5C2C;
    --green-mid: #4F9A50; /* measured text: card icons, stat numbers      */
    --green-bright: #8CC24A; /* measured text: hero panel title + icons     */
    --green-accent: #74A63C; /* measured text: H1 third line                */
    --green-pale: #8FAE88; /* on-navy logo tagline (footer)                */
    --green-pale-ink: #5A7A52; /* logo tagline on white — AA at 11px        */

    /* ---------- Ink on light ---------- */
    --ink-strong: #04070F; /* measured text: headings, nav, card titles    */
    --ink-body: #3F4247; /* measured text: card + section body copy      */
    --ink-muted: #5A5D63; /* measured text: labels, captions              */

    /* ---------- Ink on navy ---------- */
    --ink-on-navy: #FFFFFF; /* measured text: H1                            */
    --ink-on-navy-soft: #E6EAF1; /* measured text: hero lead, panel labels      */
    --ink-on-navy-muted: #B4BCCB; /* derived: footer secondary text               */

    /* ---------- Lines ---------- */
    --border-card: #E7E8EA; /* measured: card hairline                      */
    --border-divider: #E3E5E8; /* measured: stats strip vertical rules         */
    --border-on-navy: #26313F; /* measured: hero panel border                  */

    /* ---------- Radii ----------
       Tight and consistent: this design has no pill shapes and no blobs. */
    --radius-sm: 6px; /* buttons, badges */
    --radius-md: 8px; /* cards           */
    --radius-lg: 10px; /* hero panel      */
    --radius-full: 9999px; /* icon circles    */

    /* ---------- Layout ---------- */
    --container-max: 1280px; /* measured content width, gutters sit outside  */
    --container-pad: 24px;
    --grid-gutter: 16px; /* measured: the 6-up card row runs tight       */

    /* Measured: the hero copy is inset ~68px past the container edge while
       the panel stays flush right. Deliberately asymmetric in the reference. */
    --hero-copy-inset: 68px;

    /* ---------- Spacing, 4px base ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 56px;
    --space-12: 72px;

    /* ---------- Type ----------
       Distinctive display + calm body. Avoids default SaaS Inter. */
    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

    /* Measured: H1 ascender 23px at 1024 -> 42px em, 31px pitch -> 44px.
       Body sizes in the reference fall to ~10px once scaled, which is a
       mockup artefact; body copy is raised to a readable floor here. */
    --fs-h1: 46px;
    --lh-h1: 1.08;
    --fs-h2: 34px;
    --lh-h2: 1.2;
    --fs-h3: 20px;
    --fs-card-title: 15px;
    --fs-lead: 17px;
    --fs-body: 15px;
    --lh-body: 1.7; /* measured: the reference runs a loose body leading */
    --fs-small: 13px;
    --fs-stat: 30px;
    --fs-nav: 14px;
    --fs-button: 15px;

    --tracking-h1: -0.02em; /* measured: the display type is slightly tight */
    --tracking-caps: 0.14em; /* measured: logo tagline, eyebrow labels       */

    /* ---------- Components ---------- */
    --header-height: 64px; /* measured 46px at 1024                        */
    --control-height: 46px; /* measured 33px at 1024                        */
    --control-pad-x: 22px;
    --card-pad: 24px; /* measured 17px at 1024                        */
    --hero-panel-width: 288px; /* measured 208px at 1024                       */
    --section-pad-y: var(--space-12);

    --transition: 180ms ease;
    --reveal-distance: 18px;
}