/* =============================================================
   tokens.css — the single source of truth for the visual system
   -------------------------------------------------------------
   Palette sampled from the IFM Portugal logo. Nothing in this
   application may hardcode a colour, radius, shadow or spacing
   value; everything references a token declared here.
   ============================================================= */

:root {
    /* ---- brand ------------------------------------------- */
    --ember:       #E0402B;
    --ember-dark:  #B32E1C;
    --ember-soft:  #FDEDEA;
    --pine:        #0E7C7B;
    --pine-dark:   #0A5F5E;
    --pine-soft:   #E4F1F1;
    --moss:        #3E9B4F;
    --moss-dark:   #2F7A3D;
    --moss-soft:   #E9F5EB;
    --amber:       #D98A0B;
    --amber-dark:  #96600A;
    --amber-soft:  #FDF2E0;

    /* ---- neutrals ---------------------------------------- */
    /* Warm, so they sit beneath the brand rather than fight it */
    --ink:         #1A1A17;
    --ink-2:       #4C4C43;
    --ink-3:       #7C7C71;
    --line:        #E6E3DB;
    --line-soft:   #F0EEE8;
    --surface:     #FFFFFF;
    --paper:       #FAFAF8;

    /* ---- radius: three steps, no more -------------------- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* ---- elevation: three steps, no more ----------------- */
    --e-1: 0 1px 2px rgba(26, 26, 23, .05);
    --e-2: 0 2px 8px rgba(26, 26, 23, .06), 0 1px 2px rgba(26, 26, 23, .04);
    --e-3: 0 12px 32px rgba(26, 26, 23, .10), 0 2px 6px rgba(26, 26, 23, .05);

    /* ---- spacing: 4px base ------------------------------- */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    /* ---- type -------------------------------------------- */
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-xs: 12px;
    --fs-sm: 13.5px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 21px;
    --fs-2xl: 25px;
    --fs-3xl: 30px;

    /* ---- layout ------------------------------------------ */
    --page-max: 1180px;
    --nav-h: 60px;

    /* ---- motion ------------------------------------------ */
    --t-fast: .15s;
    --t-base: .22s;
    --ease: cubic-bezier(.2, .8, .3, 1);
}

/* Respect people who ask for less movement */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}