/* PhoenixHub shared theme (PhoenixHub green) — linked by every app page.
   Product colours/radii/shadows/spacing live ONLY here. */
/* ================================================================
   PhoenixHub design system — court green, cream, League Spartan + Inter.
   The ONLY place product colours, radii, shadows, spacing and control
   sizes are defined. Every component below uses these tokens (or the
   older names aliased to them further down), so re-theming PhoenixHub
   means editing this block, not individual screens.
   PhoenixHub owns the shell and components; a club only supplies its
   name, logo, people photos and data — never colours.
   ================================================================ */
:root{
  /* Brand — PhoenixHub court green. Brand green is for identity and ACTIONS
     (buttons, links, active navigation). It is deliberately a deeper, bluer
     green than the "success" status green, and status chips always carry a
     soft fill + icon/label — so Paid/Confirmed never read as a button. */
  --phoenix-primary:#0f5a43;
  --phoenix-primary-hover:#0b4634;
  --phoenix-primary-soft:#e3f0e9;
  --phoenix-primary-strong:#0b3d2e;     /* text/icons on primary-soft */
  --phoenix-on-primary:#ffffff;
  --phoenix-accent:#3ddc84;             /* fresh green: highlights, hero CTA, active marker */
  --phoenix-accent-ink:#053321;         /* text on the accent */
  --phoenix-accent-rgb:61,220,132;      /* for soft glows: rgba(var(--phoenix-accent-rgb), a) */
  --phoenix-navy-rgb:12,43,33;          /* for shadows tinted with the shell colour */
  /* Shell (sidebar / mobile top bar / scoreboard) — deep court green */
  --phoenix-navy:#0c2b21;
  --phoenix-navy-raised:#133a2d;
  --phoenix-navy-line:rgba(255,255,255,.10);
  --phoenix-nav-text:#c9dbd1;
  --phoenix-nav-text-strong:#ffffff;
  --phoenix-nav-muted:#8fae9f;
  --phoenix-nav-hover:rgba(255,255,255,.07);
  --phoenix-nav-active:#17684c;
  /* Surfaces & text — warm cream ground, white cards */
  --phoenix-background:#f6f4ee;
  --phoenix-surface:#ffffff;
  --phoenix-surface-2:#f2f0e8;          /* subtle fills, table stripes, hovers */
  --phoenix-border:#e6e2d6;
  --phoenix-border-strong:#d2ccbb;      /* form controls */
  --phoenix-text:#11221b;
  --phoenix-text-muted:#4a5c54;
  --phoenix-text-faint:#66766e;
  /* Semantic status — never replaced by the brand green */
  --status-success:#15803d; --status-success-soft:#eaf7ee; --status-success-border:#a6e0bb;
  --status-warning:#b45309; --status-warning-soft:#fff7e8; --status-warning-border:#f3cf8a;
  --status-danger:#c0262d;  --status-danger-soft:#fdeeee;  --status-danger-border:#f2b1b1;
  --status-info:#1d4ed8;    --status-info-soft:#e8f0fe;    --status-info-border:#b9cffb;
  /* Accent tones — soft colour for KPI cards, section icons and page artwork.
     Used deliberately, never as big saturated blocks, never instead of status. */
  --tone-blue:#2563eb;   --tone-blue-soft:#e8f0fe;
  --tone-green:#0f5a43;  --tone-green-soft:#e3f0e9;
  --tone-amber:#b45309;  --tone-amber-soft:#fff4e0;
  --tone-purple:#7c3aed; --tone-purple-soft:#f1eafe;
  --tone-pink:#db2777;   --tone-pink-soft:#fde8f2;
  --tone-teal:#0f766e;   --tone-teal-soft:#e0f5f2;
  --tone-red:#c0262d;    --tone-red-soft:#fdeeee;
  --tone-slate:#4a5c54;  --tone-slate-soft:#eef0ea;
  /* Page banner (the shared page header on every screen) */
  --banner-bg:linear-gradient(115deg, #ffffff 0%, #f8f6f0 55%, #e6f1ea 100%);
  --banner-border:#e4e0d3;
  /* Shape, depth, rhythm */
  --radius-sm:6px; --radius-control:10px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(17,34,27,.05), 0 2px 8px -4px rgba(17,34,27,.07);
  --shadow-md:0 1px 2px rgba(17,34,27,.04), 0 8px 20px -10px rgba(17,34,27,.14);
  --shadow-lg:0 18px 40px -16px rgba(12,43,33,.30);
  --focus-ring:0 0 0 3px rgba(15,90,67,.30);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --control-h:38px; --control-h-sm:30px;
  --icon-sm:16px; --icon-md:18px; --icon-lg:22px;
  --avatar-xs:24px; --avatar-sm:28px; --avatar-md:40px; --avatar-lg:44px;
  /* Typography: League Spartan for the brand and page/section headings;
     Inter for everything operational (body, controls, tables, numbers). */
  --font-brand:"League Spartan", "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-display:"Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", -apple-system, "Segoe UI", sans-serif;

  /* Older names used throughout the stylesheet and app.js inline styles,
     kept as aliases of the tokens above (no screen needs editing). */
  --ink:var(--phoenix-text);
  --ink-soft:var(--phoenix-text-muted);
  --ink-faint:var(--phoenix-text-faint);
  --ground:var(--phoenix-background);
  --surface:var(--phoenix-surface);
  --surface-2:var(--phoenix-surface-2);
  --court:var(--phoenix-primary);
  --court-deep:var(--phoenix-primary-hover);
  --court-tint:var(--phoenix-primary-soft);
  --cork:var(--status-warning);
  --cork-tint:var(--status-warning-soft);
  --line:var(--phoenix-border);
  --good:var(--status-success);
  --good-tint:var(--status-success-soft);
  --warn:var(--status-warning);
  --warn-tint:var(--status-warning-soft);
  --bad:var(--status-danger);
  --bad-tint:var(--status-danger-soft);
  --shadow:var(--shadow-md);
}
/* Dark theme (the sun/moon toggle, or the OS preference) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --phoenix-primary:#3ccf86; --phoenix-primary-hover:#2fb372; --phoenix-primary-soft:#0f2e22; --phoenix-primary-strong:#b6ecd0;
    --phoenix-accent:#3ddc84; --phoenix-accent-ink:#053321;
    --phoenix-navy:#07170f; --phoenix-navy-raised:#0f261b; --phoenix-nav-active:#17684c;
    --phoenix-background:#0a1410; --phoenix-surface:#111d18; --phoenix-surface-2:#172620;
    --phoenix-border:#23372d; --phoenix-border-strong:#32493d;
    --phoenix-text:#e6efe9; --phoenix-text-muted:#a8bcb1; --phoenix-text-faint:#87998f;
    --status-success:#4ade80; --status-success-soft:#0f2a1b; --status-success-border:#1f5134;
    --status-warning:#fbbf24; --status-warning-soft:#2b2108; --status-warning-border:#5c4410;
    --status-danger:#f87171;  --status-danger-soft:#2d1315;  --status-danger-border:#5c2327;
    --status-info:#93c5fd;    --status-info-soft:#172554;    --status-info-border:#1e3a8a;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --focus-ring:0 0 0 3px rgba(61,220,132,.40);
    --tone-blue:#93c5fd;   --tone-blue-soft:#172554;
    --tone-green:#3ccf86;  --tone-green-soft:#0f2e22;
    --tone-amber:#fbbf24;  --tone-amber-soft:#2b2108;
    --tone-purple:#c4b5fd; --tone-purple-soft:#2a1d4a;
    --tone-pink:#f9a8d4;   --tone-pink-soft:#3a1a2c;
    --tone-teal:#5eead4;   --tone-teal-soft:#0f2e2b;
    --tone-red:#f87171;    --tone-red-soft:#2d1315;
    --tone-slate:#cbd5e1;  --tone-slate-soft:#1e293b;
    --banner-bg:linear-gradient(115deg, #111d18 0%, #12261d 60%, #143325 100%);
    --banner-border:#23372d;
      }
}
:root[data-theme="dark"]{
  --phoenix-primary:#3ccf86; --phoenix-primary-hover:#2fb372; --phoenix-primary-soft:#0f2e22; --phoenix-primary-strong:#b6ecd0;
  --phoenix-accent:#3ddc84; --phoenix-accent-ink:#053321;
  --phoenix-navy:#07170f; --phoenix-navy-raised:#0f261b; --phoenix-nav-active:#17684c;
  --phoenix-background:#0a1410; --phoenix-surface:#111d18; --phoenix-surface-2:#172620;
  --phoenix-border:#23372d; --phoenix-border-strong:#32493d;
  --phoenix-text:#e6efe9; --phoenix-text-muted:#a8bcb1; --phoenix-text-faint:#87998f;
  --status-success:#4ade80; --status-success-soft:#0f2a1b; --status-success-border:#1f5134;
  --status-warning:#fbbf24; --status-warning-soft:#2b2108; --status-warning-border:#5c4410;
  --status-danger:#f87171;  --status-danger-soft:#2d1315;  --status-danger-border:#5c2327;
  --status-info:#93c5fd;    --status-info-soft:#172554;    --status-info-border:#1e3a8a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --focus-ring:0 0 0 3px rgba(61,220,132,.40);
  --tone-blue:#93c5fd;   --tone-blue-soft:#172554;
  --tone-green:#3ccf86;  --tone-green-soft:#0f2e22;
  --tone-amber:#fbbf24;  --tone-amber-soft:#2b2108;
  --tone-purple:#c4b5fd; --tone-purple-soft:#2a1d4a;
  --tone-pink:#f9a8d4;   --tone-pink-soft:#3a1a2c;
  --tone-teal:#5eead4;   --tone-teal-soft:#0f2e2b;
  --tone-red:#f87171;    --tone-red-soft:#2d1315;
  --tone-slate:#cbd5e1;  --tone-slate-soft:#1e293b;
  --banner-bg:linear-gradient(115deg, #111d18 0%, #12261d 60%, #143325 100%);
  --banner-border:#23372d;
  }

/* ------------------------------------------------------------------
   Appearance: Classic Blue (optional, per browser — Settings → Appearance).
   Same design, different BRAND tokens only. Status colours (success /
   warning / danger / info), team & gender data colours, typography, radii
   and spacing are deliberately NOT here: Yes/Paid/Confirmed stay green,
   Not sure/Awaiting amber, No/Error/Destructive red, in both appearances.
   Green (no attribute) is the default. Applied before first paint by the
   Manager and Vote pages from localStorage "phoenixHubAppearance".
   ------------------------------------------------------------------ */
:root[data-appearance="blue"]{
  --phoenix-primary:#1d4ed8; --phoenix-primary-hover:#1e40af; --phoenix-primary-soft:#e8effd; --phoenix-primary-strong:#1e3a8a;
  --phoenix-accent:#60a5fa; --phoenix-accent-ink:#0a1f44; --phoenix-accent-rgb:96,165,250;
  --phoenix-navy:#0f1f3d; --phoenix-navy-raised:#172b52; --phoenix-navy-rgb:15,31,61;
  --phoenix-nav-text:#c9d5ea; --phoenix-nav-muted:#93a4c3; --phoenix-nav-active:#1e4fb4;
  --phoenix-background:#f4f6fa; --phoenix-surface-2:#eef2f8; --phoenix-border:#e1e6ef; --phoenix-border-strong:#c9d2e0;
  --phoenix-text:#0f172a; --phoenix-text-muted:#475569; --phoenix-text-faint:#5f6c80;
  --focus-ring:0 0 0 3px rgba(29,78,216,.30);
  --banner-bg:linear-gradient(115deg, #ffffff 0%, #f5f7fb 55%, #e6edfb 100%); --banner-border:#dfe5ef;
}
@media (prefers-color-scheme: dark){
  :root[data-appearance="blue"]:not([data-theme="light"]){
    --phoenix-primary:#6ea8ff; --phoenix-primary-hover:#5b94f0; --phoenix-primary-soft:#11213f; --phoenix-primary-strong:#c7dcff;
    --phoenix-accent:#60a5fa; --phoenix-accent-ink:#0a1f44; --phoenix-accent-rgb:96,165,250;
    --phoenix-navy:#070f1f; --phoenix-navy-raised:#0e1a33; --phoenix-navy-rgb:7,15,31; --phoenix-nav-active:#1e4fb4;
    --phoenix-background:#0a0f1a; --phoenix-surface:#111827; --phoenix-surface-2:#172033;
    --phoenix-border:#243049; --phoenix-border-strong:#33415e;
    --phoenix-text:#e5ecf6; --phoenix-text-muted:#a9b6cc; --phoenix-text-faint:#8795ab;
    --focus-ring:0 0 0 3px rgba(110,168,255,.40);
    --banner-bg:linear-gradient(115deg, #111827 0%, #13203a 60%, #16284a 100%); --banner-border:#243049;
  }
}
:root[data-appearance="blue"][data-theme="dark"]{
  --phoenix-primary:#6ea8ff; --phoenix-primary-hover:#5b94f0; --phoenix-primary-soft:#11213f; --phoenix-primary-strong:#c7dcff;
  --phoenix-accent:#60a5fa; --phoenix-accent-ink:#0a1f44; --phoenix-accent-rgb:96,165,250;
  --phoenix-navy:#070f1f; --phoenix-navy-raised:#0e1a33; --phoenix-navy-rgb:7,15,31; --phoenix-nav-active:#1e4fb4;
  --phoenix-background:#0a0f1a; --phoenix-surface:#111827; --phoenix-surface-2:#172033;
  --phoenix-border:#243049; --phoenix-border-strong:#33415e;
  --phoenix-text:#e5ecf6; --phoenix-text-muted:#a9b6cc; --phoenix-text-faint:#8795ab;
  --focus-ring:0 0 0 3px rgba(110,168,255,.40);
  --banner-bg:linear-gradient(115deg, #111827 0%, #13203a 60%, #16284a 100%); --banner-border:#243049;
}