/* GENERATED by bin/sync-tokens.php from design/tokens.css (sha256 70cc76715259).
   Do not edit here: change design/tokens.css and re-run the script. */
@layer reset, tokens, base, components, shell, utilities, page;
@layer tokens {
/* =====================================================================================================
   Aelius 2 — design tokens (v1, 2026-10-13)
   Usage:  <link rel="stylesheet" href="tokens.css">  then style with var(--ae-*).
   Themes: follows prefers-color-scheme; override with <html data-theme="light|dark">.
           Any element may carry data-theme too (e.g. a light pricing section on a dark marketing page).
   Accent: per tenant, one hue + one chroma (OKLCH). Presets: <html data-accent="wine|ocean|forest|sun|violet|teal">
           or set --ae-accent-h / --ae-accent-c inline from the tenant record.
   Every colour is OKLCH so light/dark and per-tenant accents keep the same perceived contrast.
   Prefix --ae- everywhere (same convention as the 2026 layer, so the old and new apps can coexist).
   ===================================================================================================== */

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

  /* ---- Accent (tenant) --------------------------------------------------------------------------- */
  --ae-accent-h: 355;            /* wine (default, LA Dance Academy) */
  --ae-accent-c: 0.13;
  --ae-accent-l: 42%;            /* light theme: dark enough for white text (contrast >= 7:1) */
  --ae-accent:        oklch(var(--ae-accent-l) var(--ae-accent-c) var(--ae-accent-h));
  --ae-accent-hover:  oklch(36% var(--ae-accent-c) var(--ae-accent-h));
  --ae-accent-active: oklch(31% var(--ae-accent-c) var(--ae-accent-h));
  --ae-accent-soft:   oklch(95.5% 0.02 var(--ae-accent-h));   /* chips, hover rows, selected */
  --ae-accent-soft-2: oklch(91% 0.045 var(--ae-accent-h));    /* selected + pressed */
  --ae-accent-ink:    oklch(34% 0.12 var(--ae-accent-h));     /* text on soft */
  --ae-accent-line:   oklch(78% 0.08 var(--ae-accent-h));     /* selection outlines, sparkline */
  --ae-on-accent:     oklch(99% 0 0);

  /* ---- Neutrals (tinted with the accent hue, very low chroma) ----------------------------------- */
  --ae-ink:       oklch(21% 0.012 var(--ae-accent-h));
  --ae-ink-2:     oklch(33% 0.012 var(--ae-accent-h));
  --ae-muted:     oklch(50% 0.014 var(--ae-accent-h));   /* secondary text, 4.6:1 on surface */
  --ae-faint:     oklch(64% 0.012 var(--ae-accent-h));   /* placeholders, disabled text */
  --ae-line:      oklch(91% 0.008 var(--ae-accent-h));
  --ae-line-2:    oklch(85% 0.010 var(--ae-accent-h));   /* field borders */
  --ae-bg:        oklch(96.5% 0.005 var(--ae-accent-h));
  --ae-surface:   oklch(100% 0 0);
  --ae-surface-2: oklch(98.2% 0.004 var(--ae-accent-h));
  --ae-surface-3: oklch(95% 0.006 var(--ae-accent-h));   /* pressed, table header */
  --ae-scrim:     oklch(15% 0.02 var(--ae-accent-h) / 0.5);

  /* sidebar (always dark, tinted with accent hue; same in both themes) */
  --ae-side:       oklch(18% 0.03 var(--ae-accent-h));
  --ae-side-2:     oklch(24% 0.03 var(--ae-accent-h));
  --ae-side-ink:   oklch(93% 0.01 var(--ae-accent-h));
  --ae-side-muted: oklch(70% 0.02 var(--ae-accent-h));
  --ae-side-current: oklch(100% 0 0 / 0.12);

  /* ---- Semantic ---------------------------------------------------------------------------------- */
  --ae-green:       oklch(50% 0.13 150);  --ae-green-soft: oklch(95% 0.04 150);  --ae-green-ink: oklch(38% 0.11 150);
  --ae-amber:       oklch(56% 0.13 70);   --ae-amber-soft: oklch(96% 0.05 85);   --ae-amber-ink: oklch(42% 0.11 65);
  --ae-red:         oklch(52% 0.19 27);   --ae-red-soft:   oklch(95% 0.03 25);   --ae-red-ink:   oklch(42% 0.17 27);
  --ae-blue:        oklch(50% 0.12 245);  --ae-blue-soft:  oklch(95% 0.025 245); --ae-blue-ink:  oklch(40% 0.11 245);
  --ae-teal:        oklch(52% 0.09 180);  --ae-teal-soft:  oklch(95% 0.03 180);  --ae-teal-ink:  oklch(40% 0.08 180);
  --ae-violet:      oklch(47% 0.15 300);  --ae-violet-soft:oklch(95% 0.03 300);  --ae-violet-ink:oklch(38% 0.13 300);
  --ae-gold:        oklch(80% 0.15 80);   /* logo swoosh */

  /* ---- Typography (Commissioner: full Greek, variable, OFL, self-hosted at /assets/fonts/) ------ */
  --ae-font: "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ae-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ae-text-xs: 12px;   /* captions, table headers (uppercase, .06em) */
  --ae-text-sm: 13.5px; /* secondary rows, labels, buttons sm */
  --ae-text-md: 15px;   /* body (14.5 in the old layer; 15 reads better on phones) */
  --ae-text-lg: 17px;   /* card titles, list leads */
  --ae-text-xl: 22px;   /* section titles, phone page titles */
  --ae-text-title: 26px; /* page titles on tablet/desktop (800, tracking -0.02em) */
  --ae-text-2xl: 28px;  /* KPI values, phone page titles */
  --ae-text-3xl: 36px;  /* dashboard hero number, marketing h2 */
  --ae-text-display: clamp(40px, 6vw, 72px); /* marketing hero */
  --ae-leading: 1.5;
  --ae-leading-tight: 1.2;
  --ae-tracking-caps: 0.08em;
  --ae-weight-regular: 400; --ae-weight-medium: 500; --ae-weight-semibold: 600; --ae-weight-bold: 700; --ae-weight-black: 800;

  /* ---- Spacing (4-pt) ---------------------------------------------------------------------------- */
  --ae-sp-1: 4px;  --ae-sp-2: 8px;  --ae-sp-3: 12px; --ae-sp-4: 16px; --ae-sp-5: 20px;
  --ae-sp-6: 24px; --ae-sp-8: 32px; --ae-sp-10: 40px; --ae-sp-12: 48px; --ae-sp-16: 64px; --ae-sp-24: 96px;
  --ae-gutter: 16px;           /* phone side gutter */
  --ae-gutter-desktop: 28px;
  --ae-gap-section: 24px;      /* between the blocks of a page (16 on phones, set by the shell) */
  --ae-pad-card: 20px;         /* inside cards and forms (16 on phones) */

  /* ---- Radii ------------------------------------------------------------------------------------- */
  --ae-radius-xs: 6px;   /* chips, checkboxes */
  --ae-radius-sm: 10px;  /* buttons, fields */
  --ae-radius:    14px;  /* cards, panels */
  --ae-radius-lg: 20px;  /* sheets, dialogs, phone cards */
  --ae-radius-pill: 999px;

  /* ---- Elevation (tinted shadows, never grey) ---------------------------------------------------- */
  --ae-shadow-1: 0 1px 2px oklch(20% 0.03 var(--ae-accent-h) / 0.05), 0 2px 10px -2px oklch(20% 0.03 var(--ae-accent-h) / 0.06);
  --ae-shadow-2: 0 1px 2px oklch(20% 0.03 var(--ae-accent-h) / 0.06), 0 10px 28px oklch(20% 0.03 var(--ae-accent-h) / 0.10);
  --ae-shadow-3: 0 20px 60px oklch(20% 0.03 var(--ae-accent-h) / 0.22);
  --ae-shadow-bar: 0 -6px 24px oklch(20% 0.03 var(--ae-accent-h) / 0.08);
  /* raised = a tappable card under the pointer; primary = the one strongest action of a screen */
  --ae-shadow-raised: 0 2px 4px oklch(20% 0.03 var(--ae-accent-h) / 0.06), 0 14px 32px -8px oklch(20% 0.03 var(--ae-accent-h) / 0.16);
  --ae-shadow-primary: 0 1px 2px oklch(30% 0.1 var(--ae-accent-h) / 0.25), 0 8px 20px -8px oklch(42% 0.13 var(--ae-accent-h) / 0.55);
  /* Surfaces on the page background: light = hairline + soft shadow (depth); dark = hairline + surface step */
  --ae-card-edge: oklch(91% 0.008 var(--ae-accent-h) / 0.75);

  /* ---- Motion ------------------------------------------------------------------------------------ */
  --ae-dur-fast: 120ms;   /* hover, press */
  --ae-dur: 200ms;        /* open/close, toggles */
  --ae-dur-slow: 320ms;   /* sheets, page transitions */
  --ae-ease: cubic-bezier(.2,.7,.2,1);
  --ae-ease-out: cubic-bezier(0,0,.2,1);
  --ae-ease-spring: cubic-bezier(.34,1.3,.64,1);
  --ae-press: scale(.97); /* pressed buttons, cards and rows (120 ms) */

  /* ---- Layout ------------------------------------------------------------------------------------
     Tiers: phone < 768 (bottom bar + drawer) · tablet 768–1279 (collapsible sidebar: labelled rail in
     portrait, docked sidebar in landscape) · desktop ≥ 1280 (sidebar always visible). */
  --ae-bp-tablet: 768px;         /* documentation only: media queries cannot read custom properties */
  --ae-bp-landscape: 1024px;
  --ae-bp-desktop: 1280px;
  --ae-topbar-h: 60px;
  --ae-split-bar-h: 45px;
  --ae-side-w: 252px;
  --ae-side-panel-w: min(300px, 86vw); /* the sidebar opened as an overlay (phone drawer, tablet portrait) */
  --ae-rail-w: 84px;             /* icon + short label: no hover-only affordance on touch */
  --ae-bottombar-h: 64px;
  --ae-bottombar-gap: 12px;      /* space under the floating bar (above Safari's floating toolbar) */
  --ae-content-max: 1440px;      /* reading width of the page column on wide screens */
  --ae-split-list-w: 380px;      /* list column of the list ↔ detail split view */
  --ae-touch: 44px;              /* minimum hit area on touch */
  --ae-safe-b: env(safe-area-inset-bottom, 0px);

  /* ---- Focus & z-index --------------------------------------------------------------------------- */
  --ae-focus: 0 0 0 3px oklch(var(--ae-accent-l) var(--ae-accent-c) var(--ae-accent-h) / 0.28);
  --ae-z-sticky: 100; --ae-z-side: 1020; --ae-z-topbar: 1030; --ae-z-bottombar: 1040;
  --ae-z-overlay: 1050; --ae-z-sheet: 1060; --ae-z-toast: 1070;
}

/* =====================================================================================================
   Dark theme. Same hue, higher lightness for the accent so text/icons stay readable on dark surfaces;
   neutrals keep a trace of the accent hue (never pure grey).
   ===================================================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ae-accent-l: 66%;
    --ae-accent-c: 0.15;
    --ae-accent-hover:  oklch(71% var(--ae-accent-c) var(--ae-accent-h));
    --ae-accent-active: oklch(60% var(--ae-accent-c) var(--ae-accent-h));
    --ae-accent-soft:   oklch(28% 0.05 var(--ae-accent-h));
    --ae-accent-soft-2: oklch(34% 0.07 var(--ae-accent-h));
    --ae-accent-ink:    oklch(86% 0.07 var(--ae-accent-h));
    --ae-accent-line:   oklch(55% 0.12 var(--ae-accent-h));
    --ae-on-accent:     oklch(16% 0.04 var(--ae-accent-h));

    --ae-ink:       oklch(94% 0.008 var(--ae-accent-h));
    --ae-ink-2:     oklch(84% 0.010 var(--ae-accent-h));
    --ae-muted:     oklch(70% 0.012 var(--ae-accent-h));
    --ae-faint:     oklch(55% 0.012 var(--ae-accent-h));
    --ae-line:      oklch(27% 0.012 var(--ae-accent-h));
    --ae-line-2:    oklch(33% 0.014 var(--ae-accent-h));
    --ae-bg:        oklch(14% 0.012 var(--ae-accent-h));
    --ae-surface:   oklch(19% 0.012 var(--ae-accent-h));
    --ae-surface-2: oklch(22% 0.013 var(--ae-accent-h));
    --ae-surface-3: oklch(26% 0.014 var(--ae-accent-h));
    --ae-scrim:     oklch(5% 0.01 var(--ae-accent-h) / 0.6);

    --ae-side:       oklch(11% 0.02 var(--ae-accent-h));
    --ae-side-2:     oklch(16% 0.025 var(--ae-accent-h));
    --ae-side-ink:   oklch(92% 0.01 var(--ae-accent-h));
    --ae-side-muted: oklch(66% 0.02 var(--ae-accent-h));

    --ae-green: oklch(74% 0.14 150);  --ae-green-soft: oklch(26% 0.05 150);  --ae-green-ink: oklch(84% 0.12 150);
    --ae-amber: oklch(78% 0.13 80);   --ae-amber-soft: oklch(28% 0.05 80);   --ae-amber-ink: oklch(86% 0.11 85);
    --ae-red:   oklch(72% 0.16 25);   --ae-red-soft:   oklch(27% 0.06 25);   --ae-red-ink:   oklch(84% 0.10 25);
    --ae-blue:  oklch(74% 0.11 245);  --ae-blue-soft:  oklch(26% 0.05 245);  --ae-blue-ink:  oklch(85% 0.08 245);
    --ae-teal:  oklch(74% 0.10 180);  --ae-teal-soft:  oklch(25% 0.04 180);  --ae-teal-ink:  oklch(85% 0.08 180);
    --ae-violet:oklch(74% 0.12 300);  --ae-violet-soft:oklch(27% 0.05 300);  --ae-violet-ink:oklch(85% 0.08 300);

    --ae-shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4);
    --ae-shadow-2: 0 1px 2px oklch(0% 0 0 / 0.4), 0 10px 28px oklch(0% 0 0 / 0.35);
    --ae-shadow-3: 0 20px 60px oklch(0% 0 0 / 0.6);
    --ae-shadow-bar: 0 -6px 24px oklch(0% 0 0 / 0.35);
    --ae-shadow-raised: 0 2px 4px oklch(0% 0 0 / 0.4), 0 14px 32px -8px oklch(0% 0 0 / 0.5);
    --ae-shadow-primary: 0 8px 22px -10px oklch(66% 0.15 var(--ae-accent-h) / 0.55);
    --ae-card-edge: var(--ae-line);
  }
}
:root[data-theme="dark"], [data-theme="dark"] {
  color-scheme: dark;
  --ae-accent-l: 66%;
  --ae-accent-c: 0.15;
  --ae-accent-hover:  oklch(71% var(--ae-accent-c) var(--ae-accent-h));
  --ae-accent-active: oklch(60% var(--ae-accent-c) var(--ae-accent-h));
  --ae-accent-soft:   oklch(28% 0.05 var(--ae-accent-h));
  --ae-accent-soft-2: oklch(34% 0.07 var(--ae-accent-h));
  --ae-accent-ink:    oklch(86% 0.07 var(--ae-accent-h));
  --ae-accent-line:   oklch(55% 0.12 var(--ae-accent-h));
  --ae-on-accent:     oklch(16% 0.04 var(--ae-accent-h));

  --ae-ink:       oklch(94% 0.008 var(--ae-accent-h));
  --ae-ink-2:     oklch(84% 0.010 var(--ae-accent-h));
  --ae-muted:     oklch(70% 0.012 var(--ae-accent-h));
  --ae-faint:     oklch(55% 0.012 var(--ae-accent-h));
  --ae-line:      oklch(27% 0.012 var(--ae-accent-h));
  --ae-line-2:    oklch(33% 0.014 var(--ae-accent-h));
  --ae-bg:        oklch(14% 0.012 var(--ae-accent-h));
  --ae-surface:   oklch(19% 0.012 var(--ae-accent-h));
  --ae-surface-2: oklch(22% 0.013 var(--ae-accent-h));
  --ae-surface-3: oklch(26% 0.014 var(--ae-accent-h));
  --ae-scrim:     oklch(5% 0.01 var(--ae-accent-h) / 0.6);

  --ae-side:       oklch(11% 0.02 var(--ae-accent-h));
  --ae-side-2:     oklch(16% 0.025 var(--ae-accent-h));
  --ae-side-ink:   oklch(92% 0.01 var(--ae-accent-h));
  --ae-side-muted: oklch(66% 0.02 var(--ae-accent-h));

  --ae-green: oklch(74% 0.14 150);  --ae-green-soft: oklch(26% 0.05 150);  --ae-green-ink: oklch(84% 0.12 150);
  --ae-amber: oklch(78% 0.13 80);   --ae-amber-soft: oklch(28% 0.05 80);   --ae-amber-ink: oklch(86% 0.11 85);
  --ae-red:   oklch(72% 0.16 25);   --ae-red-soft:   oklch(27% 0.06 25);   --ae-red-ink:   oklch(84% 0.10 25);
  --ae-blue:  oklch(74% 0.11 245);  --ae-blue-soft:  oklch(26% 0.05 245);  --ae-blue-ink:  oklch(85% 0.08 245);
  --ae-teal:  oklch(74% 0.10 180);  --ae-teal-soft:  oklch(25% 0.04 180);  --ae-teal-ink:  oklch(85% 0.08 180);
  --ae-violet:oklch(74% 0.12 300);  --ae-violet-soft:oklch(27% 0.05 300);  --ae-violet-ink:oklch(85% 0.08 300);

  --ae-shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4);
  --ae-shadow-2: 0 1px 2px oklch(0% 0 0 / 0.4), 0 10px 28px oklch(0% 0 0 / 0.35);
  --ae-shadow-3: 0 20px 60px oklch(0% 0 0 / 0.6);
  --ae-shadow-bar: 0 -6px 24px oklch(0% 0 0 / 0.35);
  --ae-shadow-raised: 0 2px 4px oklch(0% 0 0 / 0.4), 0 14px 32px -8px oklch(0% 0 0 / 0.5);
  --ae-shadow-primary: 0 8px 22px -10px oklch(66% 0.15 var(--ae-accent-h) / 0.55);
  --ae-card-edge: var(--ae-line);
}

/* =====================================================================================================
   Per-tenant accent presets (the tenant picks one at signup; "custom" writes --ae-accent-h/-c inline).
   Chroma is capped at 0.15 so every preset passes the same contrast checks.
   ===================================================================================================== */
:root[data-accent="wine"]   { --ae-accent-h: 355; --ae-accent-c: 0.13; }  /* dance schools (default) */
:root[data-accent="ocean"]  { --ae-accent-h: 245; --ae-accent-c: 0.13; }  /* gyms / studios default */
:root[data-accent="forest"] { --ae-accent-h: 155; --ae-accent-c: 0.12; }  /* tutoring centres default */
:root[data-accent="sun"]    { --ae-accent-h: 60;  --ae-accent-c: 0.13; }
:root[data-accent="violet"] { --ae-accent-h: 300; --ae-accent-c: 0.14; }
:root[data-accent="teal"]   { --ae-accent-h: 185; --ae-accent-c: 0.11; }

/* =====================================================================================================
   Base resets that every Aelius 2 page shares (kept tiny on purpose; components live in aelius.css).
   ===================================================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ae-bg); color: var(--ae-ink);
  font-family: var(--ae-font); font-size: var(--ae-text-md); line-height: var(--ae-leading);
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0;
}
.ae-num, .ae-money, td.ae-r { font-variant-numeric: tabular-nums; }
::selection { background: var(--ae-accent-soft-2); }
:focus-visible { outline: none; box-shadow: var(--ae-focus); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

}