/*
  IBM Plex Sans, served by us rather than by Google.

  Chosen for what these screens are: columns of minutes and money, and uppercase labels at
  .68rem that the whole layout leans on. Its figures are designed to tabulate rather than
  merely spaced to, and its 1 / l / I are three visibly different things -- which stops
  being a typographic nicety the moment someone reads back an account number.

  One variable file per subset, weight 400 to 700, which is the range this UI uses. The
  unicode-range is what keeps it cheap: latin-ext is only fetched when a character needs it,
  so a member list of Flemish names never pays for it. See fonts/README.md.

  font-display: swap -- the app is already behind its own loading spinner, and text that
  appears in the fallback and then sharpens beats text that is invisible while we wait.
*/

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
  Design tokens.

  Two identities live here at once. --brand is Clubdesk's own, and it is what you see before
  any club is known: the sign-in screens and the operator app. The moment you are inside a
  club, BrandTheme overwrites these same tokens with that club's colour, and every chip,
  badge, focus ring and button follows without knowing anything about it.

  The platform colour is orange -- warm, and nobody's club colour in this federation so
  far, which matters: a club opening a sign-in page in a colour belonging to a different
  club is a small thing that reads as a mistake. It is a shade deeper than the orange in
  the logo drafts on purpose. White text needs 4.5:1 to pass AA, and #f26a1b gives 3.1;
  #c84e0a gives 4.6 and still reads as orange rather than brown.

  The neutrals carry a slight cool cast so they sit under the orange without looking muddy,
  and they still sit under a red or a blue club colour without fighting it.
*/

:root {
  /* Clubdesk. Overridden per club at runtime by BrandTheme. */
  --brand: #c84e0a;
  --brand-dark: #9c3d08;
  --brand-contrast: #ffffff;

  /* Tint of the brand, used for chips, badges and active states. Recomputed alongside
     --brand when a club colour is applied, because color-mix on a custom property is not
     reliably interpolatable in every browser we care about. */
  --brand-wash: rgba(200, 78, 10, .10);
  --brand-ink: var(--brand);

  --ink: #17191d;
  --ink-soft: #5a6069;
  --bg: #f2f4f6;
  --surface: #ffffff;
  --line: #dfe4e9;

  --ok: #1a8f3c;
  --ok-wash: rgba(26, 143, 60, .12);
  --warn: #9a6200;
  --warn-wash: rgba(255, 170, 0, .16);
  --danger: #c00418;
  --danger-wash: rgba(192, 4, 24, .10);

  /* Tighter than the site this started from. Cards and tables are containers, not objects
     lying on a desk, and a 16px radius on a full-width table reads as a rounded box rather
     than as structure. */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Surfaces are separated by a line, not by a shadow. --shadow-raised is for the few
     things that genuinely float above the page and need to say so. */
  --shadow: none;
  --shadow-raised: 0 1px 2px rgba(16, 24, 32, .08), 0 8px 24px rgba(16, 24, 32, .10);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;

  /* The fallback is a real stack, not a formality: if the file ever fails to arrive the app
     stays legible in the system font rather than in Times New Roman. */
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --content-width: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1f4;
    --ink-soft: #99a1ab;
    --bg: #101317;
    --surface: #1a1e23;
    --line: #2a3037;

    --shadow: none;
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .45);

    /* The orange is too dark to read as text on this ground, so text-on-surface uses a
       lightened form: 6.9:1 on the surface. BrandTheme derives the same per club colour. */
    --brand-ink: #f28c4a;
    --brand-wash: rgba(242, 140, 74, .18);
    --ok-wash: rgba(26, 143, 60, .22);
    --warn-wash: rgba(255, 170, 0, .22);
    --danger-wash: rgba(192, 4, 24, .26);
  }
}