/* The colours this product is made of.
 *
 * Before this file there were 301 distinct hex values across 29 pages, with the brand
 * gradient's two colours written out 221 times between them. Changing the brand meant a
 * find-and-replace across the whole frontend, which is why it had never been done.
 *
 * WHAT THIS FILE IS NOT, YET
 *
 * It is not a reduced palette. Every token below holds the exact value that was already
 * on the pages, including several near-identical greys — `--surface-subtle` (#f8f9fa),
 * `--grey-100` (#f5f5f5) and `--grey-150` (#f0f0f0) are three shades nobody chose on
 * purpose, and they are still three shades here.
 *
 * That is deliberate. Merging them changes what people see, and deciding which grey the
 * product should actually use is a design decision, not a refactor. This pass makes that
 * decision possible — collapse two tokens into one and it applies everywhere at once —
 * without smuggling it in. The change that introduced this file is pixel-for-pixel
 * identical to what came before it.
 *
 * HOW TO USE IT
 *
 * Every page links it before its own <style> block:
 *
 *     <link rel="stylesheet" href="/tokens.css">
 *
 * Pages that already declared their own :root variables keep them; those names shadow
 * these within that page, which is the cascade working as intended and lets a page be
 * migrated later rather than now.
 *
 * ADDING A COLOUR
 *
 * If it appears twice, it belongs here. If it appears once and always will, a literal
 * is honest. The thing to avoid is a fourth grey.
 */

:root {
    /* ── Brand ──────────────────────────────────────────────────────────────────
     * The gradient is the product's signature and was written out 221 times. It is
     * one token now, so a rebrand is one line.
     */
    --brand-start: #667eea;
    --brand-end: #764ba2;
    --brand-gradient: linear-gradient(135deg, var(--brand-start), var(--brand-end));

    /* Darker relatives of the brand, used for hovers, active states and links. */
    --brand-deep: #5145bd;
    --brand-mid: #6658d3;
    --brand-violet: #6741d9;

    /* ── Semantic ───────────────────────────────────────────────────────────────
     * Bootstrap's alert palette, which the pages adopted early and used
     * consistently. Each state has a fill, text to sit on it, and a solid version
     * for buttons and badges.
     */
    --success: #28a745;
    --success-ink: #155724;
    --success-fill: #d4edda;

    --danger: #dc3545;
    --danger-ink: #721c24;
    --danger-fill: #f8d7da;
    --danger-alt: #e74c3c;      /* a second red the interview pages settled on */

    --warning-ink: #856404;
    --warning-fill: #fff3cd;

    --info-fill: #e7f3ff;

    /* ── Neutrals ───────────────────────────────────────────────────────────────
     * Named by the job they do rather than by their lightness, except where the
     * product genuinely has several shades doing the same job — see the note at
     * the top of this file.
     */
    --surface-subtle: #f8f9fa;
    --grey-100: #f5f5f5;
    --grey-150: #f0f0f0;
    --grey-200: #e8e8e8;
    --grey-250: #e0e0e0;
    --page-tint: #f4f6fa;

    --border: #dee2e6;
    --border-cool: #dfe4eb;

    --ink-muted: #687386;
}

/* ── The public pages' chrome ───────────────────────────────────────────────────
 * The landing page, the interview-practice page and the referrals page share one
 * look: the same nav, the same footer, the same purple. That palette used to be a
 * `:root` block copied into each of them, so a fourth page meant a fourth copy and
 * a colour change meant three edits.
 *
 * Scoped to a class rather than added to `:root`, because several of these names
 * already exist above with different values — `--border` here is #e2e8f0 and the
 * app's is #dee2e6, and `--success` here is the marketing green. Hoisting them
 * would silently repaint every signed-in page in the product. On the body of a
 * page that opts in, they shadow the tokens above for that page only, which is
 * exactly what the copied `:root` blocks were doing.
 *
 *     <body class="site-chrome">
 */
.site-chrome {
    --purple-start: var(--brand-start);
    --purple-end: var(--brand-end);
    --purple-mid: #6f68e8;
    --dark: #1a1a2e;
    --dark-2: #16213e;
    --text: #2d3748;
    --text-light: #718096;
    --white: #ffffff;
    --off-white: #f7f8fc;
    --border: #e2e8f0;
    --success: #48bb78;
    --warning: #ed8936;
    --info: #4299e1;
    --footer-ink: #a0aec0;
}
