/* ========================================================================== *
 * Root : Global Variable & Theme Engine
 * ==========================================================================
 *
 * Three parts:
 *   1. Colour scales      — five oklch scales (n b g y r), light + mirrored dark
 *   2. Role tokens        — what each part of the interface uses (--ink, --line, --pri…)
 *   3. Mako size tokens   — layout, spacing, type, radius and motion, set to the
 *                           design's FIXED values (not fluid) so the Mako utilities
 *                           in 3-layout.css / 4-function.css reproduce the screens.
 *
 * Source: _readme/design/bambino-session-tracker-designs/tokens-and-components.css
 *
 * Page and section styles use ROLE tokens only (--ink, --muted, --line, --panel,
 * --pri…). Never a raw scale step, never a hex or rgba().
 * ========================================================================== */


/* ========================================================================== *
 * 1. COLOUR SCALES
 * ==========================================================================
 * Hues: Neutral 260, Blue 250, Green 152, Yellow 95, Coral 22.
 * Every step shares one lightness value across hues; chroma sets intensity.
 * Neutral runs 0–1000, the four pastels run 50–950.
 *
 * DARK MODE MIRRORS THE SCALES: each step takes its mirror's value
 * (0↔1000, 50↔950, 100↔900, 200↔800, 300↔700, 400↔600; 500 stays).
 * Roles always name the same step, so tints become shades and text flips
 * with no second palette.
 *
 * Three declarations of the same scales:
 *   - light       on :root and .theme-light
 *   - dark        when the system prefers dark (unless data-theme="light")
 *   - forced dark on :root[data-theme="dark"] and .theme-dark
 * ========================================================================== */

/* -- Light -- */

:root,
.theme-light {

	color-scheme: light;

	/* Neutral — hue 260 */
	--n-0: oklch(1.000 0.000 260);
	--n-50: oklch(0.975 0.004 260);
	--n-100: oklch(0.948 0.006 260);
	--n-200: oklch(0.905 0.008 260);
	--n-300: oklch(0.855 0.010 260);
	--n-400: oklch(0.790 0.012 260);
	--n-500: oklch(0.640 0.014 260);
	--n-600: oklch(0.530 0.016 260);
	--n-700: oklch(0.460 0.018 260);
	--n-800: oklch(0.380 0.020 260);
	--n-900: oklch(0.290 0.022 260);
	--n-950: oklch(0.220 0.022 260);
	--n-1000: oklch(0.165 0.020 260);

	/* Blue — hue 250 */
	--b-50: oklch(0.975 0.022 250);
	--b-100: oklch(0.948 0.045 250);
	--b-200: oklch(0.905 0.080 250);
	--b-300: oklch(0.855 0.120 250);
	--b-400: oklch(0.790 0.150 250);
	--b-500: oklch(0.640 0.180 250);
	--b-600: oklch(0.530 0.190 250);
	--b-700: oklch(0.460 0.170 250);
	--b-800: oklch(0.380 0.140 250);
	--b-900: oklch(0.290 0.100 250);
	--b-950: oklch(0.220 0.070 250);

	/* Green — hue 152 */
	--g-50: oklch(0.975 0.030 152);
	--g-100: oklch(0.948 0.060 152);
	--g-200: oklch(0.905 0.100 152);
	--g-300: oklch(0.855 0.150 152);
	--g-400: oklch(0.790 0.190 152);
	--g-500: oklch(0.640 0.200 152);
	--g-600: oklch(0.530 0.180 152);
	--g-700: oklch(0.460 0.150 152);
	--g-800: oklch(0.380 0.120 152);
	--g-900: oklch(0.290 0.085 152);
	--g-950: oklch(0.220 0.060 152);

	/* Yellow — hue 95 */
	--y-50: oklch(0.975 0.035 95);
	--y-100: oklch(0.948 0.070 95);
	--y-200: oklch(0.905 0.120 95);
	--y-300: oklch(0.855 0.165 95);
	--y-400: oklch(0.790 0.180 95);
	--y-500: oklch(0.640 0.170 95);
	--y-600: oklch(0.530 0.140 95);
	--y-700: oklch(0.460 0.120 95);
	--y-800: oklch(0.380 0.100 95);
	--y-900: oklch(0.290 0.075 95);
	--y-950: oklch(0.220 0.055 95);

	/* Coral — hue 22 */
	--r-50: oklch(0.975 0.022 22);
	--r-100: oklch(0.948 0.045 22);
	--r-200: oklch(0.905 0.080 22);
	--r-300: oklch(0.855 0.120 22);
	--r-400: oklch(0.790 0.155 22);
	--r-500: oklch(0.640 0.190 22);
	--r-600: oklch(0.530 0.200 22);
	--r-700: oklch(0.460 0.180 22);
	--r-800: oklch(0.380 0.145 22);
	--r-900: oklch(0.290 0.100 22);
	--r-950: oklch(0.220 0.070 22);
}


/* -- Dark: follows the system setting -- */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {

		color-scheme: dark;

		/* Neutral — hue 260 */
		--n-0: oklch(0.165 0.020 260);
		--n-50: oklch(0.220 0.022 260);
		--n-100: oklch(0.290 0.022 260);
		--n-200: oklch(0.380 0.020 260);
		--n-300: oklch(0.460 0.018 260);
		--n-400: oklch(0.530 0.016 260);
		--n-500: oklch(0.640 0.014 260);
		--n-600: oklch(0.790 0.012 260);
		--n-700: oklch(0.855 0.010 260);
		--n-800: oklch(0.905 0.008 260);
		--n-900: oklch(0.948 0.006 260);
		--n-950: oklch(0.975 0.004 260);
		--n-1000: oklch(1.000 0.000 260);

		/* Blue — hue 250 */
		--b-50: oklch(0.220 0.070 250);
		--b-100: oklch(0.290 0.100 250);
		--b-200: oklch(0.380 0.140 250);
		--b-300: oklch(0.460 0.170 250);
		--b-400: oklch(0.530 0.190 250);
		--b-500: oklch(0.640 0.180 250);
		--b-600: oklch(0.790 0.150 250);
		--b-700: oklch(0.855 0.120 250);
		--b-800: oklch(0.905 0.080 250);
		--b-900: oklch(0.948 0.045 250);
		--b-950: oklch(0.975 0.022 250);

		/* Green — hue 152 */
		--g-50: oklch(0.220 0.060 152);
		--g-100: oklch(0.290 0.085 152);
		--g-200: oklch(0.380 0.120 152);
		--g-300: oklch(0.460 0.150 152);
		--g-400: oklch(0.530 0.180 152);
		--g-500: oklch(0.640 0.200 152);
		--g-600: oklch(0.790 0.190 152);
		--g-700: oklch(0.855 0.150 152);
		--g-800: oklch(0.905 0.100 152);
		--g-900: oklch(0.948 0.060 152);
		--g-950: oklch(0.975 0.030 152);

		/* Yellow — hue 95 */
		--y-50: oklch(0.220 0.055 95);
		--y-100: oklch(0.290 0.075 95);
		--y-200: oklch(0.380 0.100 95);
		--y-300: oklch(0.460 0.120 95);
		--y-400: oklch(0.530 0.140 95);
		--y-500: oklch(0.640 0.170 95);
		--y-600: oklch(0.790 0.180 95);
		--y-700: oklch(0.855 0.165 95);
		--y-800: oklch(0.905 0.120 95);
		--y-900: oklch(0.948 0.070 95);
		--y-950: oklch(0.975 0.035 95);

		/* Coral — hue 22 */
		--r-50: oklch(0.220 0.070 22);
		--r-100: oklch(0.290 0.100 22);
		--r-200: oklch(0.380 0.145 22);
		--r-300: oklch(0.460 0.180 22);
		--r-400: oklch(0.530 0.200 22);
		--r-500: oklch(0.640 0.190 22);
		--r-600: oklch(0.790 0.155 22);
		--r-700: oklch(0.855 0.120 22);
		--r-800: oklch(0.905 0.080 22);
		--r-900: oklch(0.948 0.045 22);
		--r-950: oklch(0.975 0.022 22);
	}
}


/* -- Dark: forced (previews, the kitchensink theme switch) -- */

:root[data-theme="dark"],
.theme-dark {

	color-scheme: dark;

	/* Neutral — hue 260 */
	--n-0: oklch(0.165 0.020 260);
	--n-50: oklch(0.220 0.022 260);
	--n-100: oklch(0.290 0.022 260);
	--n-200: oklch(0.380 0.020 260);
	--n-300: oklch(0.460 0.018 260);
	--n-400: oklch(0.530 0.016 260);
	--n-500: oklch(0.640 0.014 260);
	--n-600: oklch(0.790 0.012 260);
	--n-700: oklch(0.855 0.010 260);
	--n-800: oklch(0.905 0.008 260);
	--n-900: oklch(0.948 0.006 260);
	--n-950: oklch(0.975 0.004 260);
	--n-1000: oklch(1.000 0.000 260);

	/* Blue — hue 250 */
	--b-50: oklch(0.220 0.070 250);
	--b-100: oklch(0.290 0.100 250);
	--b-200: oklch(0.380 0.140 250);
	--b-300: oklch(0.460 0.170 250);
	--b-400: oklch(0.530 0.190 250);
	--b-500: oklch(0.640 0.180 250);
	--b-600: oklch(0.790 0.150 250);
	--b-700: oklch(0.855 0.120 250);
	--b-800: oklch(0.905 0.080 250);
	--b-900: oklch(0.948 0.045 250);
	--b-950: oklch(0.975 0.022 250);

	/* Green — hue 152 */
	--g-50: oklch(0.220 0.060 152);
	--g-100: oklch(0.290 0.085 152);
	--g-200: oklch(0.380 0.120 152);
	--g-300: oklch(0.460 0.150 152);
	--g-400: oklch(0.530 0.180 152);
	--g-500: oklch(0.640 0.200 152);
	--g-600: oklch(0.790 0.190 152);
	--g-700: oklch(0.855 0.150 152);
	--g-800: oklch(0.905 0.100 152);
	--g-900: oklch(0.948 0.060 152);
	--g-950: oklch(0.975 0.030 152);

	/* Yellow — hue 95 */
	--y-50: oklch(0.220 0.055 95);
	--y-100: oklch(0.290 0.075 95);
	--y-200: oklch(0.380 0.100 95);
	--y-300: oklch(0.460 0.120 95);
	--y-400: oklch(0.530 0.140 95);
	--y-500: oklch(0.640 0.170 95);
	--y-600: oklch(0.790 0.180 95);
	--y-700: oklch(0.855 0.165 95);
	--y-800: oklch(0.905 0.120 95);
	--y-900: oklch(0.948 0.070 95);
	--y-950: oklch(0.975 0.035 95);

	/* Coral — hue 22 */
	--r-50: oklch(0.220 0.070 22);
	--r-100: oklch(0.290 0.100 22);
	--r-200: oklch(0.380 0.145 22);
	--r-300: oklch(0.460 0.180 22);
	--r-400: oklch(0.530 0.200 22);
	--r-500: oklch(0.640 0.190 22);
	--r-600: oklch(0.790 0.155 22);
	--r-700: oklch(0.855 0.120 22);
	--r-800: oklch(0.905 0.080 22);
	--r-900: oklch(0.948 0.045 22);
	--r-950: oklch(0.975 0.022 22);
}



/* ========================================================================== *
 * 2. ROLE TOKENS
 * ==========================================================================
 * Declared on the same selectors as the scales' wrappers, so they resolve per
 * theme: a .theme-dark panel inside a light page re-evaluates every role.
 * ========================================================================== */

:root,
.theme-light,
.theme-dark {

	/* == Surfaces == */

	--bg: var(--n-0);               /* Page */
	--surface: var(--n-0);          /* Cards, inputs */
	--raised: var(--n-0);           /* Sheets, dialogs, drawers, menus */
	--panel: var(--n-50);           /* Panels, table heads */
	--sidebar: var(--n-50);         /* Laptop sidebar */

	/* == Lines == */

	--line: var(--n-100);           /* Dividers */
	--line-2: var(--n-200);         /* Card borders */
	--field: var(--n-500);          /* Field borders (3:1) */

	/* == Text == */

	--ink: var(--n-900);            /* Text */
	--ink-2: var(--n-700);          /* Nav text, chip x */
	--muted: var(--n-600);          /* Secondary text */

	/* == Primary (blue) == */

	--pri: var(--b-700);            /* Links, outline buttons */
	--pri-hover: var(--b-800);
	--pri-fill: oklch(0.530 0.190 250);   /* Primary button fill — FIXED in both themes */
	--on-pri: oklch(1 0 0);               /* Text on action fills — FIXED white */
	--pri-tint: var(--b-50);
	--pri-tint-2: var(--b-100);     /* Icon buttons, tonal buttons, selection */
	--ring: var(--b-200);           /* Focus halo */
	--nav-on: var(--b-800);         /* Selected nav, tonal button text */

	/* == Danger (coral) == */

	--danger: var(--r-700);         /* Destructive text and outlines */
	--danger-tint: var(--r-50);
	--danger-solid: oklch(0.530 0.200 22);   /* Destructive fill — FIXED in both themes */
	--on-danger: oklch(1 0 0);               /* FIXED white */
	--danger-ring: var(--r-200);

	/* == Status == */

	--ok-bg: var(--g-100);          /* Done */
	--ok: var(--g-800);
	--ok-line: var(--g-300);
	--info-bg: var(--b-100);        /* Scheduled */
	--info: var(--b-800);
	--neutral-bg: var(--n-100);     /* Cancelled, access off, disabled */
	--neutral: var(--n-700);
	--warn-bg: var(--y-300);        /* Note due, needs attention */
	--warn: var(--n-900);

	/* == Banners == */

	--warn-panel: var(--y-50);
	--warn-ink: var(--n-900);
	--warn-line: var(--y-300);
	--err-panel: var(--r-50);
	--err-ink: var(--r-800);
	--err-line: var(--r-200);

	/* == Toast == */

	--toast: var(--n-900);
	--on-toast: var(--n-0);
	--toast-act: var(--b-300);

	/* == Counts == */

	--count: oklch(0.530 0.200 22);       /* Nav badge — FIXED */
	--on-count: oklch(1 0 0);

	/* == Overlay and shadow == */

	--scrim: oklch(0.15 0.02 260 / .45);
	--shadow: oklch(0.2 0.02 260 / .14);
}



/* ========================================================================== *
 * 3. MAKO SIZE TOKENS
 * ==========================================================================
 * Fixed values from the design. Component files (css/components/) may keep the
 * design's exact px; page and section styles use these tokens only.
 * ========================================================================== */

:root {

	interpolate-size: allow-keywords;

	/* == Core layout unit (keeps the Mako .row / .columns grid working) == */

	--column-unit: calc(100vw / 14);              /* A single column is 1/14th of the viewport width */
	--container-width: calc(var(--column-unit) * 12);

	/* ======================================================== *
	 * Responsive '--card'(s) per 100% Container Width
	 * ========================================================
	 * Small	: 1 Card (12 col)
	 * Medium	: 2 Cards (6 col)
	 * Large	: 3 Cards (4 col)
	 * Xlarge	: 4 Cards (3 col)
	 * ======================================================== */

	--card: var(--container-width);

	/* == Spacing (design scale, px) == */

	--space-min: 2px;
	--space-25: 4px;
	--space-50: 8px;
	--space-75: 12px;
	--space-100: 16px;
	--space-125: 20px;
	--space-150: 24px;
	--space-175: 28px;
	--space-200: 32px;
	--space-250: 40px;
	--space-300: 48px;
	--space-400: 64px;

	/* In-between steps the screens use a lot (gap 6/10/14/22, padding 14/10…) */
	--space-37: 6px;
	--space-62: 10px;
	--space-87: 14px;
	--space-112: 18px;
	--space-137: 22px;

	/* == Type scale (design values, px) == */

	--h1: 26px;                     /* 30px from 1000px, below */
	--h2: 21px;
	--h3: 17px;
	--h4: 15px;
	--h5: var(--label);             /* Not in the design; Mako's base styles reference it */
	--h6: var(--small);             /* Not in the design; Mako's base styles reference it */
	--p: 16px;
	--label: 14px;
	--small: 13px;
	--kpi: 24px;
	--wordmark-sm: 21px;            /* Laptop sidebar */
	--wordmark-lg: 30px;            /* Sign-in */

	/* Sizes the screens use a lot that the scale above lacks */
	--h-section: 18px;              /* In-page section headings ("Today's sessions") */
	--h-sub: 19px;                  /* Mobile sub-screen header title */
	--h-sheet: 20px;                /* Dialog and sheet titles */

	/* == Borders, buttons, radius == */

	--border-width: 1px;
	--space-button: 44px;           /* Touch target minimum */

	--radius-sm: 8px;
	--radius: 10px;
	--radius-card: 14px;
	--radius-sheet: 20px;

	/* == App layout == */

	--sidebar-width: 300px;
	--content-max: 1160px;
	--content-narrow: 1000px;       /* Narrower measure used by the UI kit and tables */
	--tabbar-height: 72px;          /* Mobile bottom tab bar, before the safe-area inset */

	/* == Motion == */

	--transition-speed: 0.3s;
	--transition-ease: cubic-bezier(0.42, 0, 0.58, 1);
}

@media (min-width: 500px) {
	:root {
		--card: calc(var(--container-width) / 2);
	}
}

@media (min-width: 1000px) {
	:root {
		--card: calc(var(--container-width) / 3);
		--h1: 30px;
	}
}

@media (min-width: 1500px) {
	:root {
		--card: calc(var(--container-width) / 4);
	}
}



/* ========================================================================== *
 * 4. ACCENT (white-label, Round 9 / Slice 40)
 * ==========================================================================
 * A practice's accent colour (Settings → Branding, practices.settings.accent),
 * set by js/shell.js as <html data-accent="teal">. Blue is the default: the
 * shell sets no attribute for it. Any element may carry data-accent too (the
 * Settings palette's swatches show their own --pri-fill that way).
 * Only the primary family changes (--pri, --pri-hover, --pri-fill, --pri-tint,
 * --pri-tint-2); status, danger, focus and nav stay as designed.
 * Each accent is a hue and a chroma factor on the blue scale's lightness steps,
 * so contrast matches the design's blue; dark mode mirrors them like the scales
 * (700 ↔ 300 lightness, 50 ↔ 950). --pri-fill is fixed in both themes.
 * ========================================================================== */

[data-accent="blue"] { --accent-h: 250; --accent-c: 1; }
[data-accent="indigo"] { --accent-h: 275; --accent-c: 1; }
[data-accent="purple"] { --accent-h: 305; --accent-c: 0.9; }
[data-accent="pink"] { --accent-h: 350; --accent-c: 0.9; }
[data-accent="orange"] { --accent-h: 50; --accent-c: 0.95; }
[data-accent="green"] { --accent-h: 152; --accent-c: 0.8; }
[data-accent="teal"] { --accent-h: 195; --accent-c: 0.75; }
[data-accent="slate"] { --accent-h: 260; --accent-c: 0.2; }

[data-accent] {
	--pri: oklch(0.460 calc(0.170 * var(--accent-c, 1)) var(--accent-h, 250));
	--pri-hover: oklch(0.380 calc(0.140 * var(--accent-c, 1)) var(--accent-h, 250));
	--pri-fill: oklch(0.530 calc(0.190 * var(--accent-c, 1)) var(--accent-h, 250));
	--pri-tint: oklch(0.975 calc(0.022 * var(--accent-c, 1)) var(--accent-h, 250));
	--pri-tint-2: oklch(0.948 calc(0.045 * var(--accent-c, 1)) var(--accent-h, 250));
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"])[data-accent],
	:root:not([data-theme="light"]) [data-accent] {
		--pri: oklch(0.855 calc(0.120 * var(--accent-c, 1)) var(--accent-h, 250));
		--pri-hover: oklch(0.905 calc(0.080 * var(--accent-c, 1)) var(--accent-h, 250));
		--pri-tint: oklch(0.220 calc(0.070 * var(--accent-c, 1)) var(--accent-h, 250));
		--pri-tint-2: oklch(0.290 calc(0.100 * var(--accent-c, 1)) var(--accent-h, 250));
	}
}

:root[data-theme="dark"][data-accent],
:root[data-theme="dark"] [data-accent] {
	--pri: oklch(0.855 calc(0.120 * var(--accent-c, 1)) var(--accent-h, 250));
	--pri-hover: oklch(0.905 calc(0.080 * var(--accent-c, 1)) var(--accent-h, 250));
	--pri-tint: oklch(0.220 calc(0.070 * var(--accent-c, 1)) var(--accent-h, 250));
	--pri-tint-2: oklch(0.290 calc(0.100 * var(--accent-c, 1)) var(--accent-h, 250));
}