/* ============================================================
   PointsBall theme tokens — single source of truth for colour.
   ------------------------------------------------------------
   Every surface, border, text and accent colour in the app
   resolves through one of these variables. Nothing in any other
   stylesheet should contain a raw hex value.

   Ramp direction is the same in both themes:
     --s0 = most recessed   ->   --s9 = most elevated
   In dark mode elevation gets lighter; in light mode elevation
   gets whiter. That keeps the depth hierarchy intact when the
   theme flips.
   ============================================================ */

:root{
  /* surface ramp (recessed -> elevated) */
  --s0:#05070a; --s1:#07090d; --s2:#090d14; --s3:#0b1017; --s4:#0d1118;
  --s5:#101824; --s6:#121824; --s7:#151f2d; --s8:#182131; --s9:#1a2230;

  /* borders */
  --b1:#202a39; --b2:#263348; --b3:#303c4e;

  /* text */
  --t1:#f4f7fb; --t2:#b8c1cf; --t3:#8490a3; --t4:#637086;

  /* accents — "-ink" variants are for text/icons and carry the
     contrast burden; the plain variant is for fills. */
  --cyan:#18d1e7;      --cyan-ink:#43dcff;   --cyan-deep:#2d6577;
  --red:#ff334f;       --red-ink:#ff657b;
  --green:#24d18c;     --green-ink:#39dc96;
  --amber:#f4ba47;     --amber-ink:#e0a13a;
  --blue:#498cff;      --blue-ink:#78bfff;
  --orange:#ff5b1e;    --orange-ink:#ff8153;
  --violet:#7d4dff;    --violet-ink:#a49cff;
  --blue-deep:#1b4fd0; --orange-deep:#c9390a;

  /* text that sits on top of an accent fill */
  --on-accent:#041015; --on-red:#ffffff; --on-green:#05140e;

  /* interaction states */
  --hover:#172637; --active-chip:#10202b; --sunken:#080b10;

  /* shadows and overlays */
  --shadow-soft:rgba(0,0,0,.28);
  --shadow:rgba(0,0,0,.40);
  --shadow-strong:rgba(0,0,0,.55);
  --overlay:rgba(0,0,0,.60);
  --glass:rgba(8,11,16,.94);

  /* legacy aliases — kept so older selectors keep resolving */
  --bg:var(--s1); --panel:var(--s4); --panel2:var(--s6); --panel3:var(--s8);
  --line:var(--b1); --line2:var(--b3);
  --ink:var(--t1); --soft:var(--t2); --muted:var(--t3);
  --surface-raised:var(--s4); --surface-glass:var(--glass);
  --nav-shadow:0 -14px 36px rgba(0,0,0,.45);

  /* semantic controls — all interactive surfaces resolve through these */
  --control-bg:var(--s6); --control-border:var(--b2); --control-text:var(--t2);
  --control-hover-bg:var(--hover); --control-hover-text:var(--t1);
  --control-selected-bg:var(--cyan); --control-selected-border:var(--cyan); --control-selected-text:var(--on-accent);
  --primary-button-bg:var(--cyan); --primary-button-text:var(--on-accent);
  --secondary-button-bg:var(--s6); --secondary-button-text:var(--t1);
  --disabled-bg:var(--s5); --disabled-text:var(--t4);
}

html[data-theme="light"]{
  color-scheme:light;

  --s0:#e8edf4; --s1:#f4f7fb; --s2:#f2f6fa; --s3:#f6f9fc; --s4:#ffffff;
  --s5:#f0f4f9; --s6:#f0f4f9; --s7:#f7fafd; --s8:#e5ebf3; --s9:#ffffff;

  --b1:#dbe3ed; --b2:#ccd6e2; --b3:#c5d0de;

  --t1:#111827; --t2:#34445a; --t3:#66758a; --t4:#8494a8;

  --cyan:#0aa6c4;      --cyan-ink:#0b7f9c;   --cyan-deep:#9ed4e4;
  --red:#d81b3c;       --red-ink:#c9264a;
  --green:#0f9c67;     --green-ink:#0c8557;
  --amber:#b4780a;     --amber-ink:#996406;
  --blue:#1f6fe0;      --blue-ink:#1a5fc4;
  --orange:#d64509;    --orange-ink:#b93a06;
  --violet:#5b30d6;    --violet-ink:#4a26b0;
  --blue-deep:#12409f; --orange-deep:#a02d06;

  --on-accent:#ffffff; --on-red:#ffffff; --on-green:#ffffff;

  --hover:#e9f0f7; --active-chip:#e2edf5; --sunken:#eef3f8;

  --shadow-soft:rgba(39,55,78,.08);
  --shadow:rgba(39,55,78,.13);
  --shadow-strong:rgba(39,55,78,.20);
  --overlay:rgba(23,35,52,.42);
  --glass:rgba(255,255,255,.94);

  --nav-shadow:0 -14px 36px rgba(39,55,78,.13);

  --control-bg:#ffffff; --control-border:#cbd6e3; --control-text:#34445a;
  --control-hover-bg:#eaf2f8; --control-hover-text:#111827;
  --control-selected-bg:#0b7f9c; --control-selected-border:#0b7f9c; --control-selected-text:#ffffff;
  --primary-button-bg:#0b7f9c; --primary-button-text:#ffffff;
  --secondary-button-bg:#ffffff; --secondary-button-text:#1f2f44;
  --disabled-bg:#edf2f7; --disabled-text:#8b99aa;
}

/* ------------------------------------------------------------
   Extended palette. These are colours used in exactly one or two
   places that do not sit on the main ramp. Dark values are the
   originals, untouched; light values are contrast-corrected.
   ------------------------------------------------------------ */
:root{
  --amber-1:#6f5a2e;
  --blue-1:#2d90c9;
  --blue-10:#295575;
  --blue-11:#285170;
  --blue-12:#2c5677;
  --blue-13:#294f6d;
  --blue-14:#284d6d;
  --blue-15:#328fe9;
  --blue-16:#1677ff;
  --blue-17:#246cf1;
  --blue-18:#a49cff;
  --blue-19:#b2a8ff;
  --blue-2:#3987b6;
  --blue-20:#b2a3ff;
  --blue-3:#91bad3;
  --blue-4:#397da7;
  --blue-5:#dcecf6;
  --blue-6:#327cac;
  --blue-7:#2581bd;
  --blue-8:#2a73a5;
  --blue-9:#294c65;
  --cyan-1:#62e6ff;
  --cyan-10:#67cee5;
  --cyan-11:#74d5eb;
  --cyan-12:#55cce7;
  --cyan-13:#65d2eb;
  --cyan-14:#68cfe7;
  --cyan-15:#58bad1;
  --cyan-16:#63cce5;
  --cyan-17:#59dfff;
  --cyan-18:#70d7ff;
  --cyan-2:#25dcff;
  --cyan-3:#5be4ff;
  --cyan-4:#74d4e7;
  --cyan-5:#65e5ff;
  --cyan-6:#acdfea;
  --cyan-7:#62e3ff;
  --cyan-8:#65cee5;
  --cyan-9:#69d9f2;
  --green-1:#51dd9a;
  --green-2:#356a59;
  --orange-1:#ff9b76;
  --orange-2:#ff946c;
  --orange-3:#ff9870;
  --orange-4:#ffb55c;
  --orange-5:#d9c09d;
  --orange-6:#ffb344;
  --orange-7:#d5ae73;
  --orange-8:#e0a13a;
  --orange-9:#f4ba47;
  --red-1:#ffc4c4;
  --red-2:#ff625f;
  --red-3:#ff8a82;
  --red-4:#ff8a9a;
  --red-5:#ff7b8c;
  --red-6:#ff8191;
  --red-7:#ff7f89;
  --red-8:#ff5964;
  --slate-1:#8da5b4;
  --slate-2:#52606d;
  --slate-3:#9ca6b0;
  --slate-4:#9fa9b4;
  --slate-5:#9aa8ba;
  --slate-6:#a5aeba;
  --slate-7:#9ba9bc;
  --slate-8:#98a5b8;
  --violet-1:#916fff;
}

html[data-theme="light"]{
  --amber-1:#725b2b;
  --blue-1:#226b96;
  --blue-10:#295575;
  --blue-11:#285170;
  --blue-12:#2c5677;
  --blue-13:#294f6d;
  --blue-14:#284d6d;
  --blue-15:#125da6;
  --blue-16:#094eae;
  --blue-17:#0b44ad;
  --blue-18:#1709ae;
  --blue-19:#1c09ae;
  --blue-2:#2c688c;
  --blue-20:#2409ae;
  --blue-3:#326685;
  --blue-4:#3778a0;
  --blue-5:#266892;
  --blue-6:#3078a6;
  --blue-7:#237ab3;
  --blue-8:#2a73a5;
  --blue-9:#274c67;
  --cyan-1:#0994ae;
  --cyan-10:#1b859d;
  --cyan-11:#1787a1;
  --cyan-12:#1787a1;
  --cyan-13:#1588a2;
  --cyan-14:#19859e;
  --cyan-15:#287c90;
  --cyan-16:#1a849d;
  --cyan-17:#098fae;
  --cyan-18:#0980ae;
  --cyan-2:#0994ae;
  --cyan-3:#0993ae;
  --cyan-4:#1b879d;
  --cyan-5:#0993ae;
  --cyan-6:#257f93;
  --cyan-7:#0991ae;
  --cyan-8:#1b869d;
  --cyan-9:#0f8da9;
  --green-1:#1e9a5e;
  --green-2:#2c735c;
  --orange-1:#ae3609;
  --orange-2:#ae3609;
  --orange-3:#ae3709;
  --orange-4:#ae6309;
  --orange-5:#856332;
  --orange-6:#ae6b09;
  --orange-7:#8d662a;
  --orange-8:#9f6c19;
  --orange-9:#ad770a;
  --red-1:#ae0909;
  --red-2:#ae0c09;
  --red-3:#ae1409;
  --red-4:#ae0920;
  --red-5:#ae091e;
  --red-6:#ae091e;
  --red-7:#ae0916;
  --red-8:#ae0914;
  --slate-1:#63717a;
  --slate-2:#a0a9b2;
  --slate-3:#5f6a74;
  --slate-4:#5c6671;
  --slate-5:#5c6570;
  --slate-6:#57606b;
  --slate-7:#5b636f;
  --slate-8:#5d6672;
  --violet-1:#3009ae;
}