/* ═══════════════════════════════════════════════════════════════════
   brand.pickleball.css — "Night match"
   Pickleball Manager · pickleballmanagerapp.vn
   Approved by William Wells on the landing page, September 2026.

   The eighteen tokens of the Wells trial kit 1.2 contract, plus the
   court colours the product needs on top. Use the variables. Never a
   raw hex anywhere in the app.

   The rules that keep the family looking like one family:
   1. --t-action is the ONLY warm colour and it is only ever a button.
   2. --t-accent is the only cool colour and it is only ever a label,
      a link, or the waterline. Never a button.
   3. --t-good / --t-warn / --t-bad mean the same in every product.
   4. --t-text on --t-bg and --t-action-ink on --t-action both clear
      4.5:1. Verified.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --t-bg:#0A0F13;
  --t-deep:#13262C;
  --t-card:rgba(17,26,32,.92);
  --t-field:#0F1A20;
  --t-line:rgba(233,242,241,.15);
  --t-text:#E9F2F1;
  --t-muted:#AFC0C1;
  --t-dim:#7D8F90;
  --t-accent:#57C8DA;
  --t-action:#C8F04E;
  --t-action-2:#A8D233;
  --t-action-ink:#0C1405;
  --t-good:#5FD9A8;
  --t-warn:#F2CE74;
  --t-bad:#FF9C8A;
  --t-serif:'Syne','Manrope',system-ui,sans-serif;
  --t-sans:'Manrope',system-ui,-apple-system,sans-serif;
  --t-radius:13px;

  /* The court's own three colours. They are DERIVED from the approved
     palette but held separately, because a Circuit venue may change
     --t-action to its own identity colour and the meaning of a court
     must not move with it: booked is booked at every venue. */
  --c-booked:#C8F04E;
  --c-open:#57C8DA;
  --c-lesson:#F2CE74;
  --c-ink:#0C1405;      /* text drawn on a filled court */

  /* product-level, derived — the court itself */
  --bg2:#0D141A;
  --panel2:#16222A;
  --soft:rgba(200,240,78,.08);
  --court:#123E5E;     /* the playing surface          */
  --courtk:#0F4C74;    /* the kitchen / non-volley zone */
  --apron:#1E4A2B;     /* the surround                  */
  --cl:rgba(233,244,252,.92); /* painted lines          */
}

/* Syne has no Vietnamese subset — never render Vietnamese in it. */
html[data-lang="vi"]{--t-serif:'Manrope',system-ui,sans-serif}

[data-theme="light"]{
  --c-booked:#3C6B10;
  --c-open:#0F6E7E;
  --c-lesson:#8A6A10;
  --c-ink:#F6FFE4;
  --t-bg:#F2F4EF;
  --t-deep:#DCE6D2;
  --t-card:#FFFFFF;
  --t-field:#ECEFE6;
  --t-line:#D3DAC9;
  --t-text:#111713;
  --t-muted:#44503F;
  --t-dim:#66725F;
  --t-accent:#0F6E7E;
  --t-action:#3C6B10;
  --t-action-2:#2E560A;
  --t-action-ink:#F6FFE4;
  --t-good:#0C7A55;
  --t-warn:#8A6A10;
  --t-bad:#B3402A;
  --bg2:#FFFFFF;
  --panel2:#E9EEE2;
  --soft:rgba(60,107,16,.08);
  --court:#1C5C86;
  --courtk:#17719E;
  --apron:#2C6E45;
  --cl:#FFFFFF;
}

/* ── two more derived tokens the app needs on top of the eighteen.
      Not a palette change: both are read off the approved values. ── */
:root{ --net:#F6FBFF; --scrim:rgba(4,7,10,.72); }
[data-theme="light"]{ --net:#FFFFFF; --scrim:rgba(17,23,19,.5); }

/* ═══════════════════════════════════════════════════════════════
   The identity colour, and who gets to set it.

   A club that buys Baseline reads a seafoam landing page and then
   opens the app — so the app is seafoam too. Rally is the house lime,
   Circuit is violet, and each matches its own page at
   pickleballmanagerapp.vn exactly. On Circuit a venue may override its
   club's colour with one of its own; that is the only thing that
   outranks the tier.

   These are attributes, not inline styles, so the light theme is a
   real rule rather than something JavaScript has to remember to redo
   when the theme is switched. Every pair below clears 4.5:1 for its
   ink and 3:1 against its own background, measured, in both themes.

   What never moves: --c-booked, --c-open and --c-lesson. A court means
   the same thing at every tier and every venue.
   ═══════════════════════════════════════════════════════════════ */

/* ── the tier ────────────────────────────────────────────────── */
:root[data-tier="baseline"]{--t-action:#8FD9C4;--t-action-2:#63BCA4;--t-action-ink:#06231B}
:root[data-tier="rally"]   {--t-action:#C8F04E;--t-action-2:#A8D233;--t-action-ink:#0C1405}
:root[data-tier="circuit"] {--t-action:#BCA6FF;--t-action-2:#9A7EE8;--t-action-ink:#190F33}
[data-theme="light"][data-tier="baseline"]{--t-action:#146B55;--t-action-2:#0F5443;--t-action-ink:#F0FFF9}
[data-theme="light"][data-tier="rally"]   {--t-action:#3C6B10;--t-action-2:#2E560A;--t-action-ink:#F6FFE4}
[data-theme="light"][data-tier="circuit"] {--t-action:#4B35A8;--t-action-2:#3A2888;--t-action-ink:#F4F0FF}

/* ── a Circuit venue, which outranks its tier ────────────────── */
:root[data-venue-skin="house"] {--t-action:#C8F04E;--t-action-2:#A8D233;--t-action-ink:#0C1405}
:root[data-venue-skin="cyan"]  {--t-action:#67D9EC;--t-action-2:#3FB6CB;--t-action-ink:#04222A}
:root[data-venue-skin="amber"] {--t-action:#F3BE55;--t-action-2:#D19B2E;--t-action-ink:#2A1B02}
:root[data-venue-skin="coral"] {--t-action:#FF9E7E;--t-action-2:#E0765A;--t-action-ink:#2D0E05}
:root[data-venue-skin="violet"]{--t-action:#BCA6FF;--t-action-2:#9A7EE8;--t-action-ink:#190F33}
[data-theme="light"][data-venue-skin="house"] {--t-action:#3C6B10;--t-action-2:#2E560A;--t-action-ink:#F6FFE4}
[data-theme="light"][data-venue-skin="cyan"]  {--t-action:#0F5F70;--t-action-2:#0A4957;--t-action-ink:#EFFCFF}
[data-theme="light"][data-venue-skin="amber"] {--t-action:#7A5405;--t-action-2:#5E4003;--t-action-ink:#FFF8E9}
[data-theme="light"][data-venue-skin="coral"] {--t-action:#8C3418;--t-action-2:#6E2711;--t-action-ink:#FFF1EC}
[data-theme="light"][data-venue-skin="violet"]{--t-action:#4B35A8;--t-action-2:#3A2888;--t-action-ink:#F4F0FF}