/* VirtuSlo design kit, version 1bb1287f — tokens
   Generated from the public site's web/src/styles.css by web/scripts/design-kit.mjs: change
   the site and run it again there, never this file. What each is for: DESIGN.md. */

:root {
  color-scheme: light;

  /* Ground and ink */
  --vs-bg: #fbfaf6; /* The page; a field inside a card */
  --vs-surface: #ffffff; /* Cards, panels, the header */
  --vs-line: #ede9df; /* Section rules, a card's edge — a divider, never a field's edge */
  --vs-line-soft: #f2efe7; /* Row separators */
  --vs-field-line: #8e8878; /* A field's edge and an outline button's: 3:1 on page and card */
  --vs-chip: #efebe1; /* Neutral pills, counts, a pressed toggle, initials, skeletons */
  --vs-raised: #ffffff; /* An open menu, dropdown or dialog, a step above what is under it */
  --vs-raised-hover: #efebe1; /* Its row under the pointer or arrow keys */
  --vs-pop-shadow: 0 12px 32px rgb(0 0 0 / 0.16), 0 2px 6px rgb(0 0 0 / 0.08); /* The shadow under anything raised */
  --vs-ink: #1f1e1a; /* Text; the primary button */
  --vs-ink-2: #6e6a5f; /* Secondary text, table headers, labels */
  --vs-ink-3: #746e5c; /* Muted: team names, hints, an empty value "—" */
  --vs-ring: rgb(0 0 0 / 0.14); /* Inset ring on avatars and flags */
  --vs-error: #9c3b50; /* Field errors, a destructive action, the removal status */

  /* Brand */
  --vs-brand: #6dc043; /* Club green, as a fill only — 2.0:1 on white, never text on the light page */
  --vs-brand-on: #12280a; /* Text on a brand fill */
  --vs-brand-ink: #2f6b1c; /* Green as text: "Slo" in the wordmark, the confirmed / open status */
  --vs-brand-tint: #e8f3e0; /* Behind brand ink: the confirmed / open pill */

  /* Pen tiers (D17) */
  --vs-pen-a: #3b4ca8; /* Tier A, indigo — a mark: dot, edge, wash */
  --vs-pen-a-tint: #e9ebfa; /* Tier A behind ink */
  --vs-pen-b: #0f6b66; /* Tier B, teal */
  --vs-pen-b-tint: #e0f1ef; /* Tier B behind ink */
  --vs-pen-c: #8a5a12; /* Tier C, amber */
  --vs-pen-c-tint: #f7eedc; /* Tier C behind ink */
  --vs-pen-d: #6e3a9a; /* Tier D, violet */
  --vs-pen-d-tint: #f1e9f8; /* Tier D behind ink */
  --vs-pen-e: #9c3b50; /* Tier E, rose */
  --vs-pen-e-tint: #f9e9ec; /* Tier E behind ink */

  /* The admin's own */
  --vs-warn: #8a5a12; /* Pending, needs a look: text and dot on --vs-warn-tint */
  --vs-warn-tint: #f7eedc; /* Behind --vs-warn */
  --vs-error-tint: #f9e9ec; /* Behind --vs-error: the removal pill, a danger button under the pointer */
  --vs-error-on: #ffffff; /* Text on an --vs-error fill: the button that confirms a delete */

  /* Dense sizes */
  --vs-control-h: 2rem; /* Buttons, fields, selects, a segmented toggle */
  --vs-row-btn: 1.5rem; /* A row's icon button (⋮, edit) — WCAG AA's least target */
  --vs-row-py: 0.3125rem; /* A table cell's padding above and below: 35px rows */
  --vs-cell-px: 0.5rem; /* A table cell's padding either side */
  --vs-edge: 1rem; /* A card's inner edge: its toolbar, its first and last column */
  --vs-chip-h: 1.375rem; /* Status pills, pen chips */
  --vs-gutter: 1.5rem; /* The page's edge, either side */
  --vs-header-h: 3.25rem; /* The app header */
  --vs-radius-control: 8px; /* Buttons and fields; 6px for a row inside a menu */
  --vs-radius-card: 12px; /* Cards, menus, dialogs */
  --vs-radius-pill: 999px; /* Pills and chips */
}

/* Dark, written twice on purpose: the media query follows the device, the attribute is a
   theme chosen in the app, and :not([data-theme='light']) keeps a choice of light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    /* Ground and ink */
    --vs-bg: #16181a;
    --vs-surface: #1d2023;
    --vs-line: #23262a;
    --vs-line-soft: #1f2225;
    --vs-field-line: #6a6f75;
    --vs-chip: #262a2e;
    --vs-raised: #2a2e33;
    --vs-raised-hover: #32373c;
    --vs-pop-shadow: 0 14px 34px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.35);
    --vs-ink: #f2f3f4;
    --vs-ink-2: #9ba1a6;
    --vs-ink-3: #828a91;
    --vs-ring: rgb(255 255 255 / 0.16);
    --vs-error: #f09bac;

    /* Brand */
    --vs-brand-ink: #8fd46c;
    --vs-brand-tint: #1c2b14;

    /* Pen tiers (D17) */
    --vs-pen-a: #a6b1f2;
    --vs-pen-a-tint: #1e2340;
    --vs-pen-b: #5fd3c9;
    --vs-pen-b-tint: #0e302d;
    --vs-pen-c: #e8b463;
    --vs-pen-c-tint: #37280f;
    --vs-pen-d: #c89ce8;
    --vs-pen-d-tint: #2a1a3a;
    --vs-pen-e: #f09bac;
    --vs-pen-e-tint: #37191f;

    /* The admin's own */
    --vs-warn: #e8b463;
    --vs-warn-tint: #37280f;
    --vs-error-tint: #37191f;
    --vs-error-on: #16181a;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  /* Ground and ink */
  --vs-bg: #16181a;
  --vs-surface: #1d2023;
  --vs-line: #23262a;
  --vs-line-soft: #1f2225;
  --vs-field-line: #6a6f75;
  --vs-chip: #262a2e;
  --vs-raised: #2a2e33;
  --vs-raised-hover: #32373c;
  --vs-pop-shadow: 0 14px 34px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.35);
  --vs-ink: #f2f3f4;
  --vs-ink-2: #9ba1a6;
  --vs-ink-3: #828a91;
  --vs-ring: rgb(255 255 255 / 0.16);
  --vs-error: #f09bac;

  /* Brand */
  --vs-brand-ink: #8fd46c;
  --vs-brand-tint: #1c2b14;

  /* Pen tiers (D17) */
  --vs-pen-a: #a6b1f2;
  --vs-pen-a-tint: #1e2340;
  --vs-pen-b: #5fd3c9;
  --vs-pen-b-tint: #0e302d;
  --vs-pen-c: #e8b463;
  --vs-pen-c-tint: #37280f;
  --vs-pen-d: #c89ce8;
  --vs-pen-d-tint: #2a1a3a;
  --vs-pen-e: #f09bac;
  --vs-pen-e-tint: #37191f;

  /* The admin's own */
  --vs-warn: #e8b463;
  --vs-warn-tint: #37280f;
  --vs-error-tint: #37191f;
  --vs-error-on: #16181a;
}

/* A race in its own colour (D37): bind class vs-race and raceColourVars() (colour.ts) on
   whatever shows the race, and the brand tokens inside follow it. */
.vs-race {
  --vs-brand: var(--race-fill);
  --vs-brand-on: var(--race-on);
  --vs-brand-ink: var(--race-ink-l);
  --vs-brand-tint: var(--race-tint-l);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .vs-race {
    --vs-brand-ink: var(--race-ink-d);
    --vs-brand-tint: var(--race-tint-d);
  }
}

:root[data-theme='dark'] .vs-race {
  --vs-brand-ink: var(--race-ink-d);
  --vs-brand-tint: var(--race-tint-d);
}