/**
 * styles/tokens.css — every --tmb-* colour token, and nothing else.
 *
 * Loaded on its own, BEFORE any stylesheet that uses the tokens: by
 * includes/styles.php (ahead of front.css), by the standalone pages that do
 * not load front.css (draft aids, fantasy index, admin logout / claude-limits /
 * mailchimp, bet redirect), and on WordPress by the tmb-paywall-unauthorized
 * mu-plugin (handle tmb-tokens, which paywall.css and alerts.css depend on).
 * Split out of front.css on 2026-10-01 so those pages can share the tokens.
 */

/* ============================================================================
   COLOUR TOKENS — the one place a site colour is defined.
   Every stylesheet (paywall.css, alerts.css and the draft aids included) uses
   these instead of repeating the hex value. Change a
   value here and it changes everywhere. Add a token when a colour means the
   same thing in more than one file.
   Greys are a closed scale of seven (below), collapsed from ~115 literals on
   2026-09-30. Use the nearest step; don't add a grey literal or an eighth step.
   Pale tints (hover, selected, result and highlight fills) use the tint tokens
   below or the good/bad shading scale, by colour family; gradient stops are
   color-mix() of the brand tokens so the gradients keep their depth.
   Saturated accents (2026-10-01) follow the same rule: the nearest token of
   the same hue, or a color-mix() of tokens where a page needs a distinct
   shade (a hover, a heat-scale step, a tier colour). No colour literal is
   left outside this file except white, black, the computed hsl() win-%
   scale on the admin systems pages and the standalone /portfolio/ page.
   ============================================================================ */
:root {
    /* Brand */
    --tmb-brand-dark: #07250e;      /* header, sidebar, dark surfaces */
    --tmb-brand: #00bd4c;           /* brand green accents */
    --tmb-brand-light: #359617;     /* light end of the sidebar gradient */
    /* Gradient stops in between are color-mix() of these, e.g.
       color-mix(in srgb, var(--tmb-brand-dark), var(--tmb-brand) 10%) */

    /* Links, buttons, focus */
    --tmb-blue: #007bff;
    --tmb-blue-alt: #0d6efd;
    --tmb-blue-alt-hover: #0b5ed7;

    /* Status */
    --tmb-green: #28a745;
    --tmb-red: #dc3545;
    --tmb-yellow: #ffc107;
    --tmb-success-text: #155724;
    --tmb-danger-text: #721c24;
    --tmb-danger-bg: #f8d7da;
    --tmb-warning-text: #856404;
    --tmb-warning-bg: #fff3cd;

    /* Accents: a darker and a lighter step for the status hues, plus one
       token per recurring accent. Any other saturated shade is a color-mix()
       of these: color-mix(in srgb, var(--tmb-red), black 12%) for a hover,
       color-mix(in srgb, var(--tmb-yellow), var(--tmb-green-300) 54%) for a
       hue no single token reaches (the draft-aid tier palette). */
    --tmb-green-700: #15803d;        /* dark success text, positive numbers */
    --tmb-green-300: #4ddc93;        /* bright green on dark surfaces */
    --tmb-red-700: #b91c1c;          /* dark error text, negative numbers, danger hover */
    --tmb-blue-800: #1e40af;         /* dark blue text, strong badges */
    --tmb-blue-300: #86b7fe;         /* light blue on dark surfaces, focus borders */
    --tmb-amber-800: #92400e;        /* warning text on amber fills */
    --tmb-gold: #b8860b;             /* stars, best-value marks */
    --tmb-orange: #fd7e14;           /* orange badges, beta marks */
    --tmb-purple: #6f42c1;           /* purple badges and icons */
    --tmb-pink-800: #9d174d;         /* magenta pills */
    --tmb-info: #17a2b8;             /* cyan info accents */

    /* Pale tints (fills, not text) */
    --tmb-blue-50: #f0f7ff;          /* row hover, light info fill */
    --tmb-blue-100: #e7f1ff;         /* selected row, info panel */
    --tmb-blue-200: #dbeafe;         /* stronger selection, badges */
    --tmb-success-bg: #d4edda;       /* success / saved row */
    --tmb-danger-bg-light: #fef2f2;  /* faint loss / error fill */
    --tmb-warning-bg-light: #fffbeb; /* editable field, highlight */
    --tmb-purple-bg: #f3e8ff;        /* purple chips */

    /* Shadows, overlays, translucent lines: black / white at a fixed opacity scale */
    --tmb-black-5: rgba(0, 0, 0, 0.05);   --tmb-black-10: rgba(0, 0, 0, 0.1);
    --tmb-black-15: rgba(0, 0, 0, 0.15);  --tmb-black-20: rgba(0, 0, 0, 0.2);
    --tmb-black-30: rgba(0, 0, 0, 0.3);   --tmb-black-45: rgba(0, 0, 0, 0.45);
    --tmb-black-60: rgba(0, 0, 0, 0.6);   --tmb-black-90: rgba(0, 0, 0, 0.9);
    --tmb-white-10: rgba(255, 255, 255, 0.1);  --tmb-white-20: rgba(255, 255, 255, 0.2);
    --tmb-white-30: rgba(255, 255, 255, 0.3);  --tmb-white-50: rgba(255, 255, 255, 0.5);
    --tmb-white-70: rgba(255, 255, 255, 0.7);  --tmb-white-90: rgba(255, 255, 255, 0.9);

    /* Chart series (Player Stats trend chart: projection / mean / median) */
    --tmb-chart-blue: #36a2eb;
    --tmb-chart-purple: #6c5ce7;
    --tmb-chart-orange: #ff9f40;
    /* Translucent fills: color-mix(in srgb, var(--tmb-blue) 8%, transparent);
       canvas / Chart.js: TMB.color('blue', 0.08) */

    /* Navy */
    --tmb-navy-900: #1a1a2e;         /* dark tooltip surface */
    --tmb-navy-700: #2b3a4a;         /* slate text, dark admin panels */

    /* Player marked IN / OUT */
    --tmb-in: #146c43;
    --tmb-out: #8b1a2a;

    /* Greys: Bootstrap 5's values, seven steps (200 and 800 retired) */
    --tmb-gray-900: #212529;   /* primary text, headings, dark surfaces */
    --tmb-gray-700: #495057;   /* secondary text */
    --tmb-gray-600: #6c757d;   /* muted text: captions, meta, labels (#999-ish text too) */
    --tmb-gray-500: #adb5bd;   /* placeholder, disabled, faint rules */
    --tmb-gray-400: #ced4da;   /* input and control borders */
    --tmb-gray-300: #dee2e6;   /* borders, dividers, row hover */
    --tmb-gray-100: #f8f9fa;   /* panel, table-head and stripe backgrounds */

    /* Rank / result shading: good-1 is the strongest green, bad-8 the strongest red */
    --tmb-good-1: #a0e6b0;  --tmb-good-2: #ace9ba;  --tmb-good-3: #b8ecc4;  --tmb-good-4: #c4efce;
    --tmb-good-5: #d0f3d8;  --tmb-good-6: #dbf6e1;  --tmb-good-7: #e7f9eb;  --tmb-good-8: #f3fcf5;
    --tmb-bad-1: #fde8e8;   --tmb-bad-2: #fcd1d1;   --tmb-bad-3: #fab9b9;   --tmb-bad-4: #f9a2a2;
    --tmb-bad-5: #f78b8b;   --tmb-bad-6: #f57474;   --tmb-bad-7: #f45c5c;   --tmb-bad-8: #f24545;
}