/* ==========================================================================
   Pace — design tokens
   Single source of truth for colour, type, space, radius, shadow and motion.
   The marketing surface is achromatic (paper + ink). The only saturated
   colour is the product's own accent, used sparingly.
   ========================================================================== */

:root {
    /* --- Paper (light surfaces, warmed rather than pure white) --- */
    --paper: #FBFBF9;
    --paper-raised: #FFFFFF;
    --paper-sunken: #F4F4F1;

    /* --- Ink (near-black rather than pure black) --- */
    --ink: #15151A;
    --ink-2: #55555E;
    /* ink-3 is the quietest text tone; it is held at 4.5:1 against every paper
       surface, so labels and captions stay readable rather than decorative. */
    --ink-3: #6C6C74;
    --ink-inverse: #FBFBF9;

    /* --- Hairlines: these do the work borders + shadows used to do --- */
    --rule: #E5E5E0;
    --rule-strong: #D2D2CC;

    /* --- Selling-point surfaces: warm grey fills + a dark grey stripe --- */
    --sell-surface: #EFEFEB;
    --sell-stripe: #35353D;

    /* --- Accent: the product purple, deepened for legibility on paper.
           The brighter original lives on inside the product UI only. --- */
    --accent: #4E3BC4;
    --accent-hover: #3F2FA6;
    --accent-soft: #F0EDFC;
    --accent-rule: #D8D1F5;

    /* --- Functional colour: product states only, never marketing chrome --- */
    --ok: #0F7A4D;
    --warn: #B45309;
    --stop: #B3261E;

    /* --- Type --- */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;

    --size-h3: clamp(1.25rem, 1.6vw, 1.5rem);
    --size-h2: clamp(1.75rem, 3.4vw, 2.5rem);
    --size-h1: clamp(2.375rem, 5vw, 3.75rem);

    /* Headlines are tight and low-contrast in weight. Scale is not the thing
       carrying the page, so nothing needs to shout. */
    --tracking-tight: -0.025em;
    --tracking-snug: -0.015em;
    --tracking-label: 0.06em;
    --leading-tight: 1.06;
    --leading-snug: 1.2;
    --leading-body: 1.65;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semi: 600;

    /* --- Space: everything lands on an 8px grid --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --space-11: 7rem;

    /* --- Layout --- */
    --container: 1120px;
    --container-narrow: 720px;
    --gutter: 1.5rem;
    --section-y: 7rem;

    /* --- Radius: one value, plus pills. Not eight. --- */
    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* --- Shadow: exactly one, reserved for lifting the product frame --- */
    --shadow: 0 1px 2px rgba(20, 20, 26, 0.04), 0 24px 48px -24px rgba(20, 20, 26, 0.18);
    --shadow-sm: 0 1px 2px rgba(20, 20, 26, 0.05);

    /* --- Motion: one gesture, one curve --- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 420ms;
    --duration-fast: 140ms;
}

/* ==========================================================================
   Product UI palette
   The colours of the real app. Used by the embedded Pace Admin demo and by the
   small device visuals on the marketing pages, so a phone mock-up and the live
   demo cannot drift apart. It stays dark on purpose: the product reads as a lit
   window in a quiet room, and these are the colours a customer actually sees.
   ========================================================================== */

:root {
    --ui-bg: #0E0E12;
    --ui-surface: #16161C;
    --ui-surface-2: #1D1D25;
    --ui-rule: #26262F;
    --ui-text: #F2F2F4;
    --ui-text-2: #9A9AA5;
    /* Held at 4.5:1 against ui-surface-2, the lightest panel it sits on. */
    --ui-text-3: #84848F;
    --ui-accent: #7B61FF;
    --ui-accent-2: #5134FF;
    --ui-ok: #34D399;
    --ui-warn: #FBBF24;
    --ui-stop: #F87171;
}

@media (min-width: 768px) {
    :root {
        --gutter: 2rem;
    }
}

@media (max-width: 767px) {
    :root {
        --section-y: 4.5rem;
    }
}