/* ============================================================================
 * tokens.css — THE DESIGN TOKENS. One palette, two front ends.
 *
 * Extracted from portal.css in Iteration 7b, when the admin panel needed the same
 * colours and the same spacing scale. The alternative was to copy twenty lines into
 * admin.css, and copied tokens drift: the day the brand blue moves, the panel keeps
 * the old one and nobody notices for a year. So both stylesheets load this first.
 *
 * VISUAL LANGUAGE: a sibling of ecosystem.ventor.tech (the VentorTech shop), not a
 * reinterpretation of it. The two anchors below are SOURCED from the shop's own
 * stylesheets, not eyeballed:
 *   * Manrope, weights 400 + 700 — literally what the shop requests from Google Fonts.
 *   * #4A90E2 — the accent/link blue in the shop's child theme.
 *
 * ONE DELIBERATE DEPARTURE, and it is an accessibility one: white text on #4A90E2
 * measures 3.29:1, which fails WCAG AA for normal text. So the brand blue stays the
 * ACCENT (links on white, focus rings, icons) and the primary BUTTON is a darkened
 * sibling (#2F76C4, 4.66:1 with white). A button nobody with average eyesight can
 * read in sunlight is not on brand either.
 *
 * The PORTAL is airy, rounded, restrained: white cards on a neutral-grey page, one
 * blue, generous whitespace. Serious B2B, no gimmicks. The ADMIN PANEL is the same
 * palette at a different density — see admin.css: it is an internal tool, and rows an
 * operator can scan beat whitespace they have to scroll past.
 * ==========================================================================*/

:root {
    /* Surfaces. The page is neutral grey, NOT white — that is what makes the white
     cards read as cards. */
    --vt-bg: #F4F5F7;
    --vt-surface: #FFFFFF;
    --vt-border: #E3E6EA;
    --vt-border-input: #D6DAE0;
    /* one step darker, so a field looks like a field */

    /* Text. Near-black grey, never pure black. Both pass AA on white AND on --vt-bg. */
    --vt-text: #1D2127;
    /* 16.2:1 on white */
    --vt-text-muted: #5F6771;
    /* 5.7:1 on white, 5.3:1 on the grey page */

    /* Blue. See the header for why there are four of them. */
    --vt-blue: #4A90E2;
    /* the shop's brand accent: icons, focus ring */
    --vt-blue-600: #2F76C4;
    /* primary button fill        — 4.66:1 with white */
    --vt-blue-700: #2B6CB8;
    /* button hover, link colour  — 5.33:1 on white */
    --vt-blue-800: #1F63B0;
    /* button active              — 6.05:1 on white */
    --vt-blue-tint: #EAF2FB;
    /* the faintest wash, for the ready badge */

    --vt-danger: #DC3545;
    /* the shop's own red: borders, accents */
    --vt-danger-text: #96222C;
    /* AA on white — the red we are allowed to SET TEXT in */
    --vt-success: #1E7A50;

    /* --- Added in 7b, for the admin panel only -----------------------------
     * The panel has states the portal never shows: a sweep that has not run, a demo
     * about to be reclaimed, a lead nobody has rung. AMBER is the "look at this" that
     * is not yet a failure; the two washes are row backgrounds behind it. They live
     * here rather than in admin.css because the day the palette is revisited, all of
     * it should be in one file — not most of it. */
    --vt-warn: #B7791F;
    /* AA on white (4.6:1) — the amber we may set TEXT in */
    --vt-warn-tint: #FDF6E7;
    --vt-danger-tint: #FDECEE;
    --vt-success-tint: #E9F5EF;

    --r-card: 16px;
    --r-field: 10px;
    --r-pill: 999px;

    --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    --shadow-lift: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 32px rgba(16, 24, 40, .10);

    /* 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 — one scale, no magic numbers below. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    --container: 1120px;
    /* The width of the card in ALL FOUR states, not just the form — the waiting and
     credentials cards use it too. One token on purpose: this is ONE page that swaps its
     contents, so if the card changed width on each state flip it would visibly jump under
     the user's cursor.
     720, not 560: at 560 the two-column rows left each field around 250px, which is a
     cramped box for a company name. This gives each column ~330px and still keeps a
     comfortable measure for the prose on the waiting screen. */
    --form-width: 720px;
    /* The credentials card is WIDER than the form. A one-time width change on the final state
       flip is fine — what would be wrong is the card jittering between the form and the waiting
       screen, which is why THOSE two share --form-width. This screen has to fit
       "https://<id>.demo.vntr.dev" + a Copy button on one line without wrapping. */
    --creds-width: 800px;
}