/* ============================================================
   YBC Bowling v2 — design tokens.
   The ONLY file in the project allowed to contain colour literals.

   The brand values are Youth Bowl Canada's own, read out of
   youthbowl.ca's theme stylesheet rather than sampled off a screenshot:
   red #e31c23 carries the navigation, cyan #00aeef the submenus, and
   deep blue #005596 the section headings, over black and white.

   The neutrals and the status colours are still Bootstrap 5's. That is
   deliberate on both counts. The app this one replaces was built on
   Bootstrap and the coaches know its greys; and green-means-present,
   amber-means-pending, red-means-missed are conventions a bowling
   league did not invent and should not repaint — YBC's palette has no
   green or amber to offer, and recolouring "absent" to a brand blue
   would cost a coach a glance every time they read a scorecard.

   This swap is the one theme.css was written for: every screen in the
   app takes its colour from here, so the whole programme rebranded in
   one file. ThemeTokenTest enforces that nothing else holds a literal.
   ============================================================ */

:root {
  /* Ground and surfaces — light content, dark chrome. */
  --c-ground:     #f8f9fa;
  --c-surface:    #ffffff;
  --c-surface-2:  #e9ecef;
  --c-line:       #dee2e6;

  /* Ink */
  --c-ink:        #212529;
  --c-ink-dim:    #6c757d;

  /* Accent — YBC's red, the same value as --c-brand below. Written out
     twice on purpose: --c-brand dresses printed stationery and --c-accent
     is what a coach clicks, and the day one of those changes the other
     should not follow it by accident. */
  --c-accent:     #e31c23;
  --c-accent-ink: #ffffff;

  /* Chrome — the navbar and the league sidebar. Black, as youthbowl.ca's
     own navigation is, and it carries its own ink: --c-ink on --c-chrome
     would be unreadable. --c-chrome-2 is the hover and active state, kept
     a hair off black so the two are distinguishable. */
  --c-chrome:         #000000;
  --c-chrome-2:       #1f1f1f;
  --c-chrome-ink:     #ffffff;
  --c-chrome-ink-dim: #b3b3b3;

  /* Status. Each has a strong value for text and borders and a subtle one
     for the fill behind them — a pill needs both, and picking the subtle
     tint per use site is how colour literals escape this file. */
  --c-success:        #198754;
  --c-success-subtle: #d1e7dd;
  --c-warning:        #997404;
  --c-warning-subtle: #fff3cd;
  --c-danger:         #dc3545;
  --c-danger-subtle:  #f8d7da;
  /* Info is YBC's cyan rather than Bootstrap's teal: it is a brand colour
     doing a status job, and the two readings do not conflict — nothing in
     this app uses "info" to mean anything a coach must act on. */
  --c-info:           #00aeef;
  --c-info-subtle:    #d6f1fd;

  /* Youth Bowl Canada's brand colours.

     --c-brand is the red, now taken from youthbowl.ca's stylesheet
     (#e31c23) rather than sampled out of the logo PNG (#e2202c) as it
     first was — a hair different, and the official value is the one to
     hold. --c-brand-2 is the charcoal-olive the wordmark is shadowed in;
     it exists because red alone reads as any sports certificate and the
     offset shadow behind it is what makes the mark theirs. It is not on
     the website at all, which is why it has no counterpart above.

     --c-brand-deep is the site's heading blue, and the app uses it to keep
     six module tiles distinguishable: with --c-accent now red, Administration
     on --c-danger would have been a second, almost identical red. */
  --c-brand:        #e31c23;
  --c-brand-2:      #53534a;
  --c-brand-deep:   #005596;

  /* Type — system stacks only, no CDN fonts.
     There is no separate display face: the previous value named Oswald,
     which is installed on none of the machines this runs on, so every
     heading in the app has silently been Arial Narrow. Bold system type
     is what the old app used and what these headings were designed as. */
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-body);

  /* Modular type scale */
  --step--1: 0.833rem;
  --step-0:  1rem;
  --step-1:  1.2rem;
  --step-2:  1.44rem;
  --step-3:  1.728rem;
  --step-4:  2.5rem;
  --step-5:  clamp(3rem, 12vw, 7rem);   /* scoreboard numerals */

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius:  10px;

  /* The one shadow in the app, on the league switcher's panel. A shadow is a
     colour, so it lives here with the rest of them. */
  --shadow-menu: 0 6px 20px rgb(0 0 0 / 0.18);

  /* Pick a Winner's slices: a soft rainbow, coral round to teal, read in
     order by the wheel. Dark ink (--c-ink) sits on every one of them. */
  --c-wheel-1: #f06c50;
  --c-wheel-2: #f58f55;
  --c-wheel-3: #f9ad5c;
  --c-wheel-4: #fdf26b;
  --c-wheel-5: #acd474;
  --c-wheel-6: #7cc675;
  --c-wheel-7: #3db978;
  --c-wheel-8: #1fbbb4;
  --c-wheel-shade: rgb(0 0 0 / 0.46);

  /* Minimum touch target — coaches use this on a phone at the alley. */
  --tap-min: 44px;
}

/* Paper needs no colour overrides now that the screen is light too. What it
   does need is for the dark chrome to stop being a black band across the top
   of every sheet — see the print block in app.css, which hides it outright. */