/* Design tokens — loaded first. New UI uses var(--…), never raw hex.
   Editorial / architectural system: navy + white, one pastel per stair
   system, square corners, heavy sans with negative tracking for titles and a
   light serif for body and labels. See Specs/02_landing-page.md. */
:root {
    /* Colour */
    --fo-navy: #001D32;
    --fo-white: #FFFFFF;
    --fo-muted: #657786;
    --fo-mist: #F7F8F9;
    --fo-ember: #FF4D28;
    --fo-lime: #DBFB94;
    --fo-mustard: #EFD57B;
    --fo-sage: #C8DCD5;
    --fo-sage-2: #B7D5D1;
    --fo-sky: #DFEBFB;
    --fo-wine: #713D47;
    --fo-line: rgba(0, 29, 50, .2);
    --fo-line-light: rgba(255, 255, 255, .25);

    /* Type — Hanken Grotesk stands in for a grotesk like Söhne,
       Newsreader for the serif. */
    --fo-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --fo-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

    /* Space */
    --sp-xs: 1rem;
    --sp-sm: 2.5rem;
    --sp-md: 4rem;
    --sp-lg: 5rem;
    --sp-xl: 7rem;
    --fo-gutter: 24px;
    --fo-header-h: 60px;
    --fo-max: 1440px;

    /* Motion — (0,.8,.3,1) is the signature curve: fast start, long soft stop. */
    --ease-out: cubic-bezier(0, .8, .3, 1);
    --ease-fast: cubic-bezier(.4, 0, .2, 1);
    --ease-slide: cubic-bezier(.7, 0, .3, 1);
    --ease-snap: cubic-bezier(0, 0, 0, 1);
    --t-reveal: .8s;
    --t-hover: .5s;
    --t-fast: .15s;
    --t-img: .4s;
}

@media (min-width: 900px) {
    :root { --fo-gutter: 40px; }
}