/* LevelOut design tokens — the single definition for every app and widget in this workspace.
 *
 * This file is the palette's source of truth. The MAUI app's Brands/<Brand>/BrandResources.xaml mirror
 * it; change a brand colour here first, then mirror it there. Before this file existed the same
 * values were pasted into the admin stylesheet and both widget stylesheets, and they had already
 * drifted (dark --line differed between admin and the booking widget; this file takes the admin
 * value).
 *
 * Custom properties only. Fonts are a separate import because the two audiences need different
 * sources (see fonts-cdn.css and fonts-hosted.css), and base element styling belongs to each app,
 * because they genuinely differ: the admin SPA paints a full page background, an embedded widget
 * must stay transparent to sit on its host page.
 */

:root {
  color-scheme: light;

  --brand: #67dae8;
  --brand-rgb: 103, 218, 232;
  --brand-strong: #16a9b9;
  --brand-deep: #0f6470;

  --page-bg: #f7fbfc;
  --panel-bg: #ffffff;
  --panel-soft: #ecfbfd;
  --surface: rgba(255, 255, 255, 0.86);
  --input-bg: #ffffff;

  --ink: #14252b;
  --muted: #60717a;
  --line: rgba(15, 100, 112, 0.11);

  --shadow: 0 24px 80px rgba(15, 100, 112, 0.14);
  --focus-ring: rgba(var(--brand-rgb), 0.28);

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-highlight: rgba(255, 255, 255, 0.86);
  --glass-shadow: 0 24px 48px rgba(15, 100, 112, 0.16);

  --danger: #dc2626;
  --danger-rgb: 220, 38, 38;
  --danger-deep: #b91c1c;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;

  --font-stack-body: "Bricolage Grotesque", sans-serif;
  --font-stack-headings: "trade-gothic-next", "Libre Franklin", sans-serif;
  --font-weight-body: 400;
  --font-weight-body-bold: 600;
  --font-weight-headings: 800;
  --font-weight-headings-bold: 900;
}

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

  --brand-strong: #67dae8;
  --brand-deep: #bff6fb;

  --page-bg: #0c1619;
  --panel-bg: #101f24;
  --panel-soft: #112b31;
  --surface: rgba(16, 31, 36, 0.88);
  --input-bg: #0d1a1e;

  --ink: #eefcff;
  --muted: #9eb5bc;
  --line: rgba(103, 218, 232, 0.13);

  --shadow: 0 28px 90px rgba(0, 0, 0, 0.4);
  --focus-ring: rgba(var(--brand-rgb), 0.22);

  --glass-bg: rgba(18, 37, 43, 0.58);
  --glass-border: rgba(146, 223, 231, 0.2);
  --glass-highlight: rgba(229, 250, 255, 0.24);
  --glass-shadow: 0 30px 64px rgba(0, 0, 0, 0.45);

  --danger: #f87171;
  --danger-rgb: 248, 113, 113;
  --danger-deep: #ffb4b4;
}

/* The flat "stripe" surface treatment. Self-adapting: --panel-bg/--line already differ correctly
   per [data-theme], so referencing them here rather than hardcoding literals makes this one block
   correct in both themes with no [data-theme][data-style] cross-product. */
:root[data-style="stripe"] {
  --glass-bg: var(--panel-bg);
  --glass-border: var(--line);
  --glass-highlight: transparent;
  --glass-shadow: none;
  --shadow: none;
}

/* The consumer app palette — the one the MAUI app ships today, as brand blocks below that MAUI's
   Brands/<Brand>/BrandResources.xaml mirror (not the default palette above, which the staff app and
   embedded widgets still use). The two diverged when the native app adopted the updated brand palette; whether the staff
   app and widgets should follow is an open product call, so both live here, side by side, rather
   than a second palette appearing anywhere else. Opt in with data-palette="app" on <html>. */
:root[data-palette="app"] {
  color-scheme: light;
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 22px;
  --font-stack-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-stack-headings: var(--font-stack-body);
}

/* LevelOut, set as data-brand on <html> from the brand the API reports. Every brand defines every colour
   below (tokens.test.ts checks), mirroring Brands/<Brand>/BrandResources.xaml in the MAUI app. */
:root[data-palette="app"][data-brand="levelout"] {
  --brand: #68dae8;
  --brand-rgb: 104, 218, 232;
  --brand-strong: #68dae8;
  --brand-deep: #0a4e5c;
  --brand-soft: #cff4f8;
  --brand-line: rgba(104, 218, 232, 0.2);
  --on-brand: #111111;
  --page-bg: #ffffff;
  --panel-bg: #f4f5f5;
  --panel-soft: #f0feff;
  --surface: #ffffff;
  --input-bg: #ffffff;
  --ink: #111111;
  --muted: #5c6566;
  --line: #e4e6e6;
  --danger: #d93a1e;
  --danger-rgb: 217, 58, 30;
  --warning: #f3b23f;
  --focus-ring: rgba(104, 218, 232, 0.45);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 28px rgba(17, 17, 17, 0.12);
  --tab-active: #111111;
  --tab-active-bg: rgba(17, 17, 17, 0.07);
}

:root[data-palette="app"][data-brand="levelout"][data-theme="dark"] {
  color-scheme: dark;
  --brand-soft: #0a4e5c;
  --brand-line: rgba(0, 194, 209, 0.2);
  --page-bg: #0d1416;
  --panel-bg: #161e20;
  --panel-soft: #0b2428;
  --surface: #161e20;
  --input-bg: #0d1416;
  --ink: #f3f6f6;
  --muted: #9ba7a9;
  --line: #2c3436;
  --danger: #ff7a5c;
  --warning: #ffc670;
  --glass-bg: rgba(22, 30, 32, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --tab-active: #68dae8;
  --tab-active-bg: rgba(104, 218, 232, 0.12);
}

/* The LevelOut marketing site (apps/site), from the "LevelOut Site Review 3" design (10 Oct 2026): warm
   off-white page, near-black ink, the brand teal for bands and a deeper teal for text on light
   backgrounds, where the brand teal is too light to read. Opt in with data-palette="site" on <html>. */
:root[data-palette="site"] {
  color-scheme: light;
  --brand: #68dae8;
  --brand-strong: #2e9dab;
  --brand-soft: #e6f8fb;
  --brand-line: #b8e9f1;
  --on-brand: #1a1a1a;
  --page-bg: #fbfaf8;
  --surface: #ffffff;
  --panel-bg: #efede9;
  --panel-soft: #f4f3f1;
  --ink: #1a1a1a;
  --body-text: #4a4a4a;
  --muted: #5a5a5a;
  --faint: #8a8a8a;
  --on-ink-muted: #d6d4d1;
  --line: rgba(0, 0, 0, 0.16);
  --line-strong: rgba(0, 0, 0, 0.3);
  --font-stack-body: Archivo, system-ui, sans-serif;
  --font-stack-headings: "Archivo Black", Archivo, sans-serif;
}

/* nytra, set as data-brand on <html> from the brand the API reports. From nytra.co.uk's theme
   (08 Oct 2026): accent #5b6bff, black surfaces, #151515 text, #f1f1f1 on dark, #e4e4e4/#3e3e3e borders.
   MAUI's Brands/nytra/BrandResources.xaml mirrors it (docs/plans/150-multi-brand-isolation). */
:root[data-palette="app"][data-brand="nytra"] {
  --brand: #5b6bff;
  --brand-rgb: 91, 107, 255;
  --brand-strong: #5b6bff;
  --brand-deep: #2b33a8;
  --brand-soft: #e1e4ff;
  --brand-line: rgba(91, 107, 255, 0.2);
  --on-brand: #ffffff;
  --page-bg: #ffffff;
  --panel-bg: #f4f5f5;
  --panel-soft: #f3f4ff;
  --surface: #ffffff;
  --input-bg: #ffffff;
  --ink: #151515;
  --muted: #5c6566;
  --line: #e4e4e4;
  --danger: #d93a1e;
  --danger-rgb: 217, 58, 30;
  --warning: #f3b23f;
  --focus-ring: rgba(91, 107, 255, 0.45);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 28px rgba(17, 17, 17, 0.12);
  --tab-active: #111111;
  --tab-active-bg: rgba(17, 17, 17, 0.07);
}

:root[data-palette="app"][data-brand="nytra"][data-theme="dark"] {
  color-scheme: dark;
  --brand-soft: #2b33a8;
  --brand-line: rgba(91, 107, 255, 0.2);
  --page-bg: #000000;
  --panel-bg: #151515;
  --panel-soft: #151515;
  --surface: #151515;
  --input-bg: #000000;
  --ink: #f1f1f1;
  --muted: #9ba7a9;
  --line: #3e3e3e;
  --danger: #ff7a5c;
  --warning: #ffc670;
  --glass-bg: rgba(22, 30, 32, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --tab-active: #5b6bff;
  --tab-active-bg: rgba(91, 107, 255, 0.12);
}