/* =========================================================================
   Design tokens — ported verbatim from https://website.wemacx.com/assets/css/main.css
   -------------------------------------------------------------------------
   These values mirror the marketing site so the platform and the public site
   read as one product. Treat this file as GENERATED-BY-HAND FROM UPSTREAM:
   if the brand changes, re-sync the values here rather than editing them
   piecemeal, and keep component styling in app.css instead.

   Light theme only — the platform has no dark mode by requirement.
   ========================================================================= */

:root {
    /* --- Core palette --- */
    --navy:         #0f0f3d;
    --navy-mid:     #1a1a5e;
    --navy-light:   #2d2d7f;
    --orange:       #ff6b00;
    --orange-hover: #e55c00;
    --orange-pale:  #fff4ee;
    --orange-glow:  rgba(255, 107, 0, 0.15);
    --indigo:       #5b4fff;
    --indigo-pale:  #f0eeff;
    --indigo-mid:   #8b7fff;
    --indigo-hover: #4a3ef0;
    --cyan:         #00c2ff;
    --cyan-pale:    #e8f9ff;
    --magenta:      #e6007e;

    /* --- Surfaces --- */
    --white:        #ffffff;
    --bg:           #fafbff;
    --bg-alt:       #eae7ff;
    --bg-warm:      #fff8f3;
    --surface:      #ffffff;
    --card-bg:      #ffffff;

    /* --- Text --- */
    --text-heading: #0f0f3d;
    --text-body:    #3a3a5c;
    --text-muted:   #6b6b8f;
    --text-subtle:  #9999bb;

    /* --- Borders --- */
    --border:       #d4d2ee;
    --border-light: #e2e0f8;

    /* --- Status --- */
    --success:      #0d9e63;
    --error:        #c22e2e;

    /* Upstream defines only success/error. Warning and info are added here
       because the platform needs them (timeouts, dependency notices) and are
       drawn from the existing palette rather than invented. */
    --warning:      #b26a00;
    --warning-pale: var(--orange-pale);
    --success-pale: #e7f7f0;
    --error-pale:   #fdecec;
    --info:         var(--indigo);
    --info-pale:    var(--indigo-pale);

    /* --- Typography --- */
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;

    /* --- Type scale (upstream) --- */
    --fs-xs:   1rem;        /* 16px */
    --fs-sm:   1.0625rem;   /* 17px */
    --fs-base: 1.125rem;    /* 18px */
    --fs-md:   1.25rem;     /* 20px */
    --fs-lg:   1.5rem;      /* 24px */
    --fs-xl:   1.875rem;    /* 30px */
    --fs-2xl:  2.5rem;      /* 40px */
    --fs-3xl:  3.25rem;     /* 52px */
    --fs-4xl:  4rem;        /* 64px */

    /* --- Spacing --- */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-7:  1.75rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-14: 3.5rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* --- Radii --- */
    --r-sm:   0.25rem;
    --r-md:   0.5rem;
    --r-lg:   0.875rem;
    --r-xl:   1.25rem;
    --r-2xl:  1.75rem;
    --r-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm:     0 2px 8px rgba(15, 15, 61, 0.09);
    --shadow-md:     0 4px 20px rgba(15, 15, 61, 0.12);
    --shadow-lg:     0 8px 32px rgba(15, 15, 61, 0.14);
    --shadow-xl:     0 16px 56px rgba(15, 15, 61, 0.16);
    --shadow-orange: 0 8px 28px rgba(255, 107, 0, 0.28);
    --shadow-indigo: 0 8px 28px rgba(91, 79, 255, 0.22);

    /* --- Transitions --- */
    --t-fast: 0.15s ease;
    --t-base: 0.22s ease;
    --t-slow: 0.38s ease;

    /* --- Layout --- */
    --max-w:  86rem;
    --px:     2.5rem;
    --px-mob: 1.25rem;

    /* --- Application-specific layout (not from upstream) ---
       The marketing site is a single-column brochure; the platform needs a
       persistent sidebar, so these are defined here rather than upstream. */
    --sidebar-w:         17rem;
    --sidebar-w-collapsed: 4.5rem;
    --topbar-h:          4rem;

    /* The upstream 18px body size suits a brochure but wastes vertical space
       in dense admin tables. Data-dense surfaces opt into this instead. */
    --fs-dense: 0.9375rem; /* 15px */
}

@media (max-width: 900px) {
    :root {
        --px: var(--px-mob);
    }
}

/* Respect users who ask for reduced motion — the upstream transitions are
   decorative, and an assessment timer is a bad place to trap someone in
   animation they can't tolerate. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --t-fast: 0s;
        --t-base: 0s;
        --t-slow: 0s;
    }
}