/*
 * Design tokens — DESIGN.md §3.
 *
 * Every colour, radius, shadow and duration in the product resolves here. No
 * component may hard-code a hex value; that rule is what keeps light and dark
 * in step and stops the "each page looks like a different product" drift that
 * the old UI suffered from.
 */

:root {
  color-scheme: light;

  /* Brand */
  --blue-50: #eef3ff;
  --blue-100: #dce7ff;
  --blue-300: #7da2ff;
  --blue-500: #2457f5;
  --blue-600: #123eea;
  --blue-700: #0b2fc7;
  --brand: var(--blue-600);
  --brand-hover: var(--blue-700);
  --brand-soft: var(--blue-50);
  --brand-gradient: linear-gradient(135deg, #2457f5 0%, #123eea 58%, #071f9f 100%);

  /*
   * Semantic — the light theme.
   *
   * Bright and warm rather than white and grey: a tournament is a colourful
   * thing and the screen it is run from was reading like a spreadsheet.
   *
   * The colour lives in the BACKGROUND and in the soft tints, never in body
   * text. Text stays near-black on white and passes contrast comfortably; what
   * changes is the ground it sits on. That is the difference between a page
   * that feels lively and one that is tiring to read all day.
   */
  --bg: #f4f6ff;
  --surface: #ffffff;
  --surface-2: #f0f3ff;
  --surface-raised: #ffffff;

  /*
   * Ink, with a trace of blue so black type does not look drilled into the page
   * next to a blue-tinted ground.
   *
   * Measured, not judged by eye. Against the three grounds this page actually
   * uses — a white card, the tinted page, and the soft fill — every one of
   * these clears 4.5:1, the ratio at which body text stops being work to read.
   *
   *   --text    18.3 : 1     --text-2  8.3 : 1     --text-3  5.3 : 1
   *
   * --text-3 is the one that mattered: it was #8f96ad, which measured 2.9 and
   * is the reason the page read as faded. It carries timestamps, hints and
   * field notes — small text, the least forgiving kind — and it was the palest
   * thing on screen.
   */
  --text: #101426;
  --text-2: #454d6b;
  --text-3: #626b8a;

  --border: #e2e7fa;
  --divider: #eef1fd;

  /*
   * Accents, measured against the ground each one sits on.
   *
   * These get used two ways and the two want opposite things: a bar or a chip
   * wants the brightest colour available, while the SAME colour used as small
   * text needs to be dark enough to read. The bright versions failed badly —
   * #06a86a on its own tint measured 2.8:1 and #f08c00 measured 2.3:1, and both
   * carry badge text all over this system.
   *
   * Green and red are set here to the LIGHTEST value of their own hue that
   * clears 4.5:1, computed rather than eyeballed, so each is as vivid as it can
   * be while still being type.
   *
   * Amber is the exception, and that is a fact about light rather than a
   * choice: there is no yellow dark enough to read on a pale ground that is
   * still recognisably yellow. So amber keeps its bright value for fills and
   * gets --warning-ink for the places it carries words.
   */
  --success: #00814f;
  --success-soft: #e4fbf0;

  --warning: #f08c00;        /* fills, borders, bars */
  --warning-ink: #a35f00;    /* the same amber, where it has to be read */
  --warning-soft: #fff5e0;

  /*
   * Gold: something EARNED, never something wrong.
   *
   * Amber on this system means "owed" and red means "broken", so a club that
   * settled before it played needed a third colour — and the sheets already
   * use gold for exactly that sense. @see public/assets/js/sheet-image.js
   */
  --gold: #d99b00;
  --gold-ink: #8a6100;
  --gold-soft: #fff4d6;

  --danger: #da0a1f;
  --danger-soft: #ffecee;

  /* Geometry */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --sidebar-w: 232px;
  --topbar-h: 72px;
  --content-max: 1440px;

  /*
   * Depth.
   *
   * The shadow is tinted with the brand rather than neutral grey — a grey
   * shadow under a card on a blue-tinted ground reads as dirt on the page.
   */
  --shadow-xs: 0 1px 2px rgba(40, 56, 120, .05);
  /*
   * The money palette.
   *
   * Six hues, one per line of the accounts, so a figure keeps the same colour
   * wherever it appears — the bar in the breakdown, the dot beside its label,
   * the wash behind its card. They are picked far enough apart to survive
   * being read at bar-width, and all sit in the same lightness band so none of
   * them shouts louder than the rest.
   *
   * Green is takings and blue is fees because those two are read together most
   * often; the costs run warm (prize gold, cup violet) and cool (referee teal,
   * activity pink) so an eye scanning the column can tell them apart without
   * reading the labels.
   */
  --tone-income:   #008753;
  --tone-fee:      #2457f5;
  --tone-cup:      #8550ff;
  --tone-referee:  #038190;
  --tone-activity: #e40b76;
  --tone-teams:    #5f62fa;

  /*
   * The two amber tones keep their bright value.
   *
   * They are drawn as bars and swatches far more often than they are read as
   * text, and darkening them enough to read would turn the prize line brown on
   * a page whose whole point is that each line is a different colour. Where
   * they do carry words, the ink variants are used.
   */
  --tone-prize:     #e0a800;
  --tone-prize-ink: #957000;
  --tone-fine:      #f08c00;
  --tone-fine-ink:  #ab6400;

  --shadow-sm: 0 6px 18px rgba(40, 56, 120, .07);
  --shadow-card: 0 14px 34px rgba(40, 56, 120, .09);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /*
   * Derived tints. DESIGN.md reaches for color-mix() here, which Safari only
   * learned in 16.2. These are the pre-mixed equivalents so the layout is
   * identical on an older iPad on the touchline.
   */
  --topbar-bg: rgba(255, 255, 255, .9);
  --brand-border: #b9caff;
  --focus-ring: rgba(36, 87, 245, .24);

  /*
   * The page wash.
   *
   * Three faint pools of colour behind everything — blue, violet and a warm
   * one — so the ground has life in it without any single area being tinted
   * enough to fight the text sitting on it. Dark mode paints nothing here.
   */
  --page-wash:
    radial-gradient(1100px 620px at 12% -8%, rgba(36, 87, 245, .10), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(148, 87, 235, .09), transparent 60%),
    radial-gradient(760px 480px at 50% 108%, rgba(6, 168, 106, .07), transparent 62%);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080a0f;
  --surface: #0f1219;
  --surface-2: #151923;
  --surface-raised: #121620;
  --text: #f5f7fb;
  --text-2: #a0a8b8;
  --text-3: #697386;
  --border: #232936;
  --divider: #1c222e;
  --brand-soft: rgba(36, 87, 245, .14);
  --success-soft: rgba(18, 183, 106, .12);
  --warning-soft: rgba(247, 144, 9, .12);
  --danger-soft: rgba(240, 68, 56, .12);
  --gold-ink: #e7b23a;
  --gold-soft: rgba(217, 155, 0, .16);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .28);
  /* The same hues, lifted. At their light-mode lightness they disappear into
     near-black; these are the versions that survive it. */
  --tone-income:   #34d399;
  --tone-fee:      #6b95ff;
  --tone-fine:     #fbbf24;
  --tone-prize:    #fcd34d;
  --tone-cup:      #a78bfa;
  --tone-referee:  #22d3ee;
  --tone-activity: #f472b6;
  --tone-teams:    #a5b4fc;

  /* On near-black the bright value IS the readable one, so the ink names point
     back at it rather than introducing a dark colour nobody could see. */
  --tone-prize-ink: #fcd34d;
  --tone-fine-ink:  #fbbf24;
  --warning-ink:    #fbbf24;

  --shadow-sm: 0 8px 22px rgba(0, 0, 0, .28);
  --shadow-card: 0 16px 36px rgba(0, 0, 0, .32);
  --topbar-bg: rgba(15, 18, 25, .88);
  --brand-border: #2b3d6b;
  --focus-ring: rgba(125, 162, 255, .32);

  /* Nothing behind the page in the dark: a broadcast desk wants the screen to
     disappear, not to glow. */
  --page-wash: none;
}

/*
 * Honour the OS preference until the user makes an explicit choice, which is
 * stamped on <html data-theme>.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #080a0f;
    --surface: #0f1219;
    --surface-2: #151923;
    --surface-raised: #121620;
    --text: #f5f7fb;
    --text-2: #a0a8b8;
    --text-3: #697386;
    --border: #232936;
    --divider: #1c222e;
    --brand-soft: rgba(36, 87, 245, .14);
    --success-soft: rgba(18, 183, 106, .12);
    --warning-soft: rgba(247, 144, 9, .12);
    --danger-soft: rgba(240, 68, 56, .12);
    --gold-ink: #e7b23a;
    --gold-soft: rgba(217, 155, 0, .16);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .28);
    --shadow-sm: 0 8px 22px rgba(0, 0, 0, .28);
    --shadow-card: 0 16px 36px rgba(0, 0, 0, .32);
    --topbar-bg: rgba(15, 18, 25, .88);
    --brand-border: #2b3d6b;
    --focus-ring: rgba(125, 162, 255, .32);

    /* The lifted money palette, and no wash — same reasoning as the explicit
       dark block above, repeated because a person who never touched the theme
       toggle gets this branch instead of that one. */
    --tone-income:   #34d399;
    --tone-fee:      #6b95ff;
    --tone-fine:     #fbbf24;
    --tone-prize:    #fcd34d;
    --tone-cup:      #a78bfa;
    --tone-referee:  #22d3ee;
    --tone-activity: #f472b6;
    --tone-teams:    #a5b4fc;

    /* On near-black the bright value IS the readable one, so the ink names point
       back at it rather than introducing a dark colour nobody could see. */
    --tone-prize-ink: #fcd34d;
    --tone-fine-ink:  #fbbf24;
    --warning-ink:    #fbbf24;

    --page-wash: none;
  }
}