/* Design tokens for the app screens (admin, family account, chat, sign-in, platform, /hq).
   Loaded FIRST by every app page, before base.css and admin.css. The spec behind every value is
   docs/design-references.md section 4; how to use them is docs/ui-components.md.

   Three layers:
   1. Platform neutrals and the one action blue (--c-*), light and dark. A club's raw colors never reach a
      control: layer 4 swaps in versions of them that tenant.js has made readable first.
   2. Type, spacing, radii, shadows, motion, team tints. Theme-independent.
   3. Club identity (--club-primary, --club-primary-ink, --club-accent, --club-highlight, --club-header) is set
      at run time by tenant.js applyBranding() and used on identity surfaces (brand mark, family header,
      event-card edge). Any text on a club color uses --club-primary-ink (--club-header-ink on the header).
   4. The club's colors on the app's controls (the --cb-* block below the dark colors): buttons, links,
      selected states, the focus ring and the sidebar take a contrast-fixed version of the club's main color,
      unless the club switched that off. Layer 1 is what you get without it.

   Every text pair below was checked for WCAG AA (4.5:1 for text, 3:1 for input outlines) with the
   relative-luminance formula; the ratios are in the comments so the next change re-checks them.

   The old variable names (--bg, --ink, --brand, --radius ...) are kept as aliases at the bottom so
   screens nobody has redone yet keep working. New code uses the --c-*, --t-*, --s-*, --r-* names. */

:root {
  /* ---- type ---- */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --t-display: clamp(2.1rem, 1.6rem + 2vw, 2.75rem);   /* hero, family welcome; Barlow 800 */
  --t-h1: 2rem;         /* page title; Barlow 700 */
  --t-h2: 1.375rem;     /* panel title; Inter 650 */
  --t-h3: 1.0625rem;    /* sub-section; Inter 600 */
  --t-kpi: 2.25rem;     /* KPI tiles, balances; Barlow 700, tabular */
  --t-body: .9375rem;   /* 15px app body */
  --t-small: .8125rem;  /* table second line, hints */
  --t-label: .75rem;    /* table headers, nav group titles; uppercase +.06em */
  --lh-tight: 1.1;
  --lh-body: 1.5;

  /* ---- spacing (4px base) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --gutter: 16px;       /* page side padding on a phone; 24 to 32 on desktop */
  --tap: 44px;          /* our own touch targets */

  /* ---- radii ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* ---- motion: 150ms menus and sheets, 200ms drawers; off under reduced motion (below) ---- */
  --dur-fast: 150ms; --dur-med: 200ms; --ease: cubic-bezier(.2, .7, .3, 1);

  /* ---- colors, light ---- */
  --c-bg: #f4f6f9;
  --c-surface: #ffffff;
  --c-surface-alt: #eef1f5;
  --c-surface-hover: #e9edf3;
  --c-ink: #0e1726;           /* 17.96 on white */
  --c-muted: #4b5768;         /* 7.34 on white, 6.48 on surface-alt, 6.37 on brand-soft */
  --c-border: #dfe4ec;        /* decorative lines */
  --c-border-strong: #7d8a9e; /* input outlines: 3.5 on white */
  --c-brand: #1f4fd1;         /* the one action color: white text on it 6.78 */
  --c-brand-ink: #ffffff;
  --c-brand-soft: #e8efff;    /* selection bar, chips; brand text on it 5.88 */
  --c-link: #1f4fd1;          /* text links: 6.78 on white */
  --c-focus: #1f4fd1;
  --c-ok: #0f7a45;            /* on ok-soft 4.83 */
  --c-ok-soft: #e6f6ee;
  --c-ok-fill: #0f7a45;       /* solid "Going" button: white 5.40 */
  --c-danger: #b42318;        /* on danger-soft 5.75 */
  --c-danger-soft: #fdecea;
  --c-danger-fill: #b42318;   /* destructive button: white 6.57 */
  --c-warn-ink: #8a5300;      /* on warn-soft 5.79 */
  --c-warn-soft: #fff4db;
  --c-warn-border: #f2d27a;
  --c-warn-fill: #8a5300;     /* white 6.33 */
  --c-energy: #c2410c;        /* optional FAB/highlight: white 5.18. (#e8590c fails with white: 3.58) */
  --c-on-energy: #ffffff;
  --c-side-bg: #0f172a;
  --c-side-ink: #c9d2e0;      /* 11.71 on side-bg */
  --c-side-muted: #9aa8bd;    /* 7.40 on side-bg */
  --c-side-hover: rgba(255, 255, 255, .08);
  --c-side-active: #1f4fd1;   /* the current sidebar item: white text 6.78 */
  --c-side-active-ink: #ffffff;
  --c-scrim: rgba(8, 12, 20, .5);
  --sh-1: 0 1px 2px rgba(16, 24, 40, .06);
  --sh-2: 0 4px 12px rgba(16, 24, 40, .08);
  --sh-3: 0 16px 40px rgba(16, 24, 40, .18);

  /* ---- team tints: a fixed, club-independent set for calendars and team chips.
     Use as a solid left edge + a soft tint background + --c-ink text (see .team-chip in components.css),
     so every chip passes AA whatever the hue. Never use the club's colors for this. ---- */
  --team-1: #2563eb; --team-2: #059669; --team-3: #d97706; --team-4: #db2777;
  --team-5: #7c3aed; --team-6: #0891b2; --team-7: #dc2626; --team-8: #65a30d;
  --tint: 14%;          /* how much of the hue goes into the chip background */
}

/* ---- colors, dark (the device setting, or <html data-theme="dark"> from theme.js) ---- */
:root[data-theme="dark"] {
  --c-bg: #0b1220; --c-surface: #111a2b; --c-surface-alt: #172235; --c-surface-hover: #1d2a40;
  --c-ink: #e8edf5;           /* 14.81 on surface */
  --c-muted: #9aa6b8;         /* 7.06 on surface, 6.47 on surface-alt */
  --c-border: #26324a; --c-border-strong: #6b7a93;   /* 3.9 on surface */
  --c-brand: #3466e6;         /* button fill: white 5.01 (the old #4c82f7 was 3.59, below AA) */
  --c-brand-ink: #ffffff;
  --c-brand-soft: #1b2a4a;    /* link text on it 6.65 */
  --c-link: #8fb0ff;          /* 8.14 on surface */
  --c-focus: #8fb0ff;
  --c-ok: #4cc38a; --c-ok-soft: #12301f; --c-ok-fill: #1e7f4f;          /* 6.46 / white on fill 5.00 */
  --c-danger: #f2766b; --c-danger-soft: #3a1d1b; --c-danger-fill: #c23a2f;   /* 5.53 / white on fill 5.33 */
  --c-warn-ink: #f5c25b; --c-warn-soft: #2f2610; --c-warn-border: #5c4a1a; --c-warn-fill: #8a5300;
  --c-side-bg: #0a0f1a; --c-side-hover: rgba(255, 255, 255, .07);
  --c-side-active: #3466e6; --c-side-active-ink: #ffffff;
  --c-scrim: rgba(0, 0, 0, .6);
  /* dark mode separates layers with borders and surfaces, not visible shadows */
  --sh-1: 0 0 0 1px rgba(0, 0, 0, .2); --sh-2: 0 2px 8px rgba(0, 0, 0, .4); --sh-3: 0 16px 40px rgba(0, 0, 0, .6);
  --tint: 24%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0b1220; --c-surface: #111a2b; --c-surface-alt: #172235; --c-surface-hover: #1d2a40;
    --c-ink: #e8edf5; --c-muted: #9aa6b8;
    --c-border: #26324a; --c-border-strong: #6b7a93;
    --c-brand: #3466e6; --c-brand-ink: #ffffff; --c-brand-soft: #1b2a4a;
    --c-link: #8fb0ff; --c-focus: #8fb0ff;
    --c-ok: #4cc38a; --c-ok-soft: #12301f; --c-ok-fill: #1e7f4f;
    --c-danger: #f2766b; --c-danger-soft: #3a1d1b; --c-danger-fill: #c23a2f;
    --c-warn-ink: #f5c25b; --c-warn-soft: #2f2610; --c-warn-border: #5c4a1a; --c-warn-fill: #8a5300;
    --c-side-bg: #0a0f1a; --c-side-hover: rgba(255, 255, 255, .07);
    --c-side-active: #3466e6; --c-side-active-ink: #ffffff;
    --c-scrim: rgba(0, 0, 0, .6);
    --sh-1: 0 0 0 1px rgba(0, 0, 0, .2); --sh-2: 0 2px 8px rgba(0, 0, 0, .4); --sh-3: 0 16px 40px rgba(0, 0, 0, .6);
    --tint: 24%;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; }
}

/* ---- the club's colors in the app (on unless the club turned it off on the Design screen) ----
   tenant.js applyAppTheme() works out every value from the club's main color, already contrast-fixed for
   light (--cb-*) and dark (--cb-*-d), and marks <html data-app-brand="club">. Only the action colors and the
   sidebar change: page backgrounds, cards, text and the status colors (ok / warn / danger) never do. Without
   the attribute (switched off, or no club color yet) everything above stays the app's own blue. */
:root[data-app-brand="club"] {
  --c-brand: var(--cb-brand); --c-brand-ink: var(--cb-brand-ink); --c-brand-soft: var(--cb-soft);
  --c-link: var(--cb-link); --c-focus: var(--cb-focus); --c-side-bg: var(--cb-side);
  --c-side-active: var(--cb-side-active); --c-side-active-ink: var(--cb-side-active-ink);
}
:root[data-app-brand="club"][data-theme="dark"] {
  --c-brand: var(--cb-brand-d); --c-brand-ink: var(--cb-brand-ink-d); --c-brand-soft: var(--cb-soft-d);
  --c-link: var(--cb-link-d); --c-focus: var(--cb-focus-d); --c-side-bg: var(--cb-side-d);
    --c-side-active: var(--cb-side-active-d); --c-side-active-ink: var(--cb-side-active-ink-d);
}
@media (prefers-color-scheme: dark) {
  :root[data-app-brand="club"]:not([data-theme="light"]) {
    --c-brand: var(--cb-brand-d); --c-brand-ink: var(--cb-brand-ink-d); --c-brand-soft: var(--cb-soft-d);
    --c-link: var(--cb-link-d); --c-focus: var(--cb-focus-d); --c-side-bg: var(--cb-side-d);
    --c-side-active: var(--cb-side-active-d); --c-side-active-ink: var(--cb-side-active-ink-d);
  }
}

/* ---- the old names, kept working (aliases). The public club site (base.css :root) has its own values
   for some of these names and is not touched: the aliases apply only inside the app bodies. ---- */
body.admin, body.login-page, body.hq {
  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --surface-alt: var(--c-surface-alt);
  --surface-hover: var(--c-surface-hover);
  --ink: var(--c-ink);
  --text: var(--c-ink);
  --muted: var(--c-muted);
  --border: var(--c-border);
  --border-strong: var(--c-border-strong);
  --brand: var(--c-brand);              /* a FILL (buttons, active pills). For text use --brand-text. */
  --brand-ink: var(--c-brand-ink);
  --brand-soft: var(--c-brand-soft);
  --brand-text: var(--c-link);          /* brand-colored text: readable in light and dark */
  --primary: var(--c-brand);
  --accent: var(--c-focus);             /* old screens use --accent for focus outlines and selected borders */
  --link: var(--c-link);
  --highlight: #f2b705;
  --danger: var(--c-danger);
  --danger-soft: var(--c-danger-soft);
  --ok: var(--c-ok);
  --ok-soft: var(--c-ok-soft);
  --warn-ink: var(--c-warn-ink);
  --warn-soft: var(--c-warn-soft);
  --warn-border: var(--c-warn-border);
  --side-bg: var(--c-side-bg);
  --side-ink: var(--c-side-ink);
  --side-muted: var(--c-side-muted);
  --side-hover: var(--c-side-hover);
  --shadow: var(--sh-1);
  --shadow-lg: var(--sh-3);
  --radius: var(--r-lg);
  --radius-sm: var(--r-md);
  --font-body: var(--font-ui);
  --font-heading: var(--font-ui);
  color-scheme: light;
}
:root[data-theme="dark"] :is(body.admin, body.login-page, body.hq) { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(body.admin, body.login-page, body.hq) { color-scheme: dark; }
}