/*
 * tokens.css  —  design tokens for Vital Landing.
 *
 * Every colour, spacing step, radius, font size, and duration used
 * anywhere in main.css or typography.css must be declared as a custom
 * property on :root here. This mirrors the iOS Theme.swift — same
 * values, same names (CSS-cased).
 *
 * Rule of thumb: if it's hex, it lives here, not in component styles.
 */

:root {
    /* --- Surfaces ---------------------------------------------------- */
    --bg:              #0A0A0A;   /* matte black — page background */
    --card:            #141414;   /* elevated surface */
    --card-elevated:   #1E1E1E;   /* nested / active surface */
    --border:          rgba(255, 255, 255, 0.08);
    --separator:       rgba(255, 255, 255, 0.08);

    /* --- Text (opacity-stack over matte black) ----------------------- */
    --text:            #FFFFFF;
    --text-secondary:  rgba(255, 255, 255, 0.72);
    --text-tertiary:   rgba(255, 255, 255, 0.48);
    --text-muted:      rgba(255, 255, 255, 0.32);

    /* --- Identity accent --------------------------------------------- */
    --accent:          #A0A0A0;   /* brushed steel — THE Vital colour */

    /* --- Promo bar (launch offer) ------------------------------------ */
    --promo-bg:        #1F4D33;   /* industrial forest — muted, not lime */
    --promo-text:      #D5F0DE;   /* high-contrast mint on the green bg */
    --promo-height:    40px;

    /* --- Semantic (form-state only) ---------------------------------- */
    --good:            #22C55E;
    --warn:            #F59E0B;
    --bad:             #EF4444;

    /* --- Spacing scale ----------------------------------------------- */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   12px;
    --space-lg:   16px;
    --space-xl:   24px;
    --space-xxl:  32px;
    --space-3xl:  48px;
    --space-4xl:  64px;
    --space-5xl:  96px;

    /* Section vertical rhythm — the quiet space between major blocks.
       Re-tightened after live deploy: on a 1600px+ viewport the old
       112px-each (stacking to 224+px between sections) plus the
       capability row's own padding came out as ~300px of empty
       between consecutive content blocks, which read as a page
       loading error, not intentional whitespace. This range caps
       each section's padding at 64px, so adjacent sections share
       ~128px of visible gap. Still clearly spaced; no longer absent. */
    --section-gap: clamp(40px, 5vw, 64px);

    /* --- Corner radii ------------------------------------------------- */
    --radius-sm:  6px;    /* inline chips, form error states */
    --radius-md:  10px;   /* buttons, inputs */
    --radius-lg:  14px;   /* hero panels if we ever use them */
    --radius-xl:  20px;   /* reserved */

    /* --- Timings ------------------------------------------------------ */
    --dur-fast:   120ms;
    --dur-med:    200ms;
    --dur-slow:   400ms;

    --ease-out:   cubic-bezier(0.2, 0.7, 0.3, 1);
    --ease-in:    cubic-bezier(0.6, 0.0, 0.8, 0.3);
    --ease-spring: cubic-bezier(0.4, 1.2, 0.4, 1);

    /* --- Container --------------------------------------------------- */
    --container-max:  min(1200px, 92vw);

    /* --- Focus ring (accessibility) ---------------------------------- */
    --focus-ring:     0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* When the OS asks for reduced motion, neutralise every timing so
   subsequent components can use var(--dur-*) without worrying. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-med:  0ms;
        --dur-slow: 0ms;
    }
}

/* Tighten spacing rhythm on phones. At ≤480px the 64–96px blocks
   left too much dead air between sections on a 667px-tall viewport. */
@media (max-width: 480px) {
    :root {
        --section-gap: clamp(32px, 7vw, 48px);
        --space-4xl:   48px;
        --space-5xl:   64px;
    }
}