/* Clearslot brand v2 tokens: the one shared source.
   Served as /_shared/brand-tokens.css for the static booking pages and
   imported by src/app.css for the dashboard. docs/BRAND.md documents the
   same names; change a value here and nowhere else.

   Scoping: a custom property that refers to another one is resolved where
   it is declared. A business theme that overrides --accent-* on a
   descendant element must redeclare every token derived from the accent in
   that same scope: --slot-open, --slot-open-ink, --slot-booked,
   --booked-fill and --status-booked-*. Overrides set on :root need nothing
   extra. */
:root {
	/* Cobalt: the only brand hue. Fixed; never themed. */
	--cobalt-50: #EEF0F4;
	--cobalt-100: #D9E4F5;
	--cobalt-200: #BACBED;
	--cobalt-300: #9DB1E6; /* open slot, the mark's back square */
	--cobalt-400: #6B85D0;
	--cobalt-500: #2F46A8; /* booked slot, the mark's front square, primary */
	--cobalt-600: #243A8E;
	--cobalt-700: #1F2C66;
	--cobalt-800: #15204A;
	--cobalt-900: #0F1734;

	/* Accent: themeable on booking pages and booking emails only. */
	--accent-50: var(--cobalt-50);
	--accent-100: var(--cobalt-100);
	--accent-300: var(--cobalt-300);
	--accent-500: var(--cobalt-500);
	--accent-700: var(--cobalt-700);
	--accent-900: var(--cobalt-900);

	/* Ink: warm neutrals (decision D1). */
	--ink: #1F1D1A;
	--ink-2: #5C5953;
	--ink-3: #76736D;
	--ink-4: #B5B3AD; /* disabled and decorative only */
	--line: rgb(31 29 26 / 0.08);
	--line-strong: rgb(31 29 26 / 0.14);

	/* Surfaces. Frost is for content tiles on the canvas. */
	--surface: #FFFFFF;
	--paper: #F4F5F8;
	--canvas: #F8FAFE;
	--frost: rgb(255 255 255 / 0.8);
	--frost-strong: rgb(255 255 255 / 0.92);

	/* Slot states: open is light, booked is dark, busy is neutral (D2).
	   Redeclare these with any --accent-* override on a descendant. */
	--slot-open: color-mix(in srgb, var(--accent-100) 55%, #FFFFFF);
	--slot-open-ink: var(--accent-700);
	--slot-booked: var(--accent-500);
	--slot-booked-ink: #FFFFFF;
	--slot-busy: rgb(31 29 26 / 0.06);
	--booked-fill: linear-gradient(135deg, color-mix(in oklab, var(--accent-500) 80%, #FFFFFF), var(--accent-500) 48%, color-mix(in oklab, var(--accent-500) 90%, #0F1734));

	/* Status (decision D2). Confirmed bookings are booked slots: cobalt
	   through the accent, never green. Every pair reaches 4.6:1 or more. */
	--status-booked-text: var(--accent-700);
	--status-booked-bg: var(--slot-open);
	--status-booked-border: var(--accent-100);
	--status-success-text: #23705A;
	--status-success-bg: #E4F4EC;
	--status-success-border: #C8E8D9;
	--status-attention-text: #93631A;
	--status-attention-bg: #FFF2D8;
	--status-attention-border: #F2DFB7;
	--status-danger-text: #A24949;
	--status-danger-bg: #FDECEC;
	--status-danger-border: #F4CCCC;
	--status-neutral-text: var(--ink-2);
	--status-neutral-bg: var(--paper);
	--status-neutral-border: var(--line);

	/* Motion: no overshoot anywhere (decision D3). --spring falls back to
	   the v1 ease-out where linear() is unsupported (see below). */
	--spring: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--dur-instant: 100ms;
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-settle: 320ms;
	--dur-move: 450ms;
	--dur-land: 650ms;

	/* Radius. Nested corners are concentric: inner = outer - padding. */
	--r-xs: 6px;
	--r-control: 10px;
	--r-card: 16px;
	--r-panel: 22px;
	--r-hero: 28px;
	--r-pill: 999px;

	/* Elevation: cobalt-700 tinted, never black. One light from the upper
	   left, so shadows fall down and slightly right (x = 0.25 × y). */
	--elev-1: 0 1px 2px rgb(31 44 102 / 0.04), 2px 8px 28px rgb(31 44 102 / 0.055);
	--elev-2: 2px 8px 20px rgb(31 44 102 / 0.07), 4px 18px 42px rgb(31 44 102 / 0.07);
	--elev-3: 6px 24px 70px rgb(31 44 102 / 0.16);
	--glow-brand: 2px 8px 24px rgb(47 70 168 / 0.2); /* primary buttons only */

	/* Focus: a two-tone ring that stays visible on any background. */
	--focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--cobalt-500);

	/* Glass: controls only (navigation, toolbars, action bars). */
	--glass-fill: rgb(255 255 255 / 0.68);
	--glass-tint: rgb(47 70 168 / 0.025);
	--glass-blur: 26px;
	--glass-saturate: 1.9;
}

/* Wide gamut (BRAND §4.2): on P3 screens cobalt 300, 500, 600 and 700 get
   12% more chroma. The hex values above stay for sRGB screens, email, logo
   files and print; @supports keeps them where oklch() cannot be parsed. */
@media (color-gamut: p3) {
	@supports (color: oklch(0 0 0)) {
		:root {
			--cobalt-300: oklch(0.764 0.089 268.5);
			--cobalt-500: oklch(0.437 0.179 268.8);
			--cobalt-600: oklch(0.385 0.159 267.9);
			--cobalt-700: oklch(0.318 0.115 270.1);
		}
	}
}

/* The critically damped spring (BRAND §8.2), sampled into linear(). It
   never passes 1. */
@supports (transition-timing-function: linear(0, 1)) {
	:root {
		--spring: linear(0, 0.057, 0.18, 0.321, 0.455, 0.573, 0.671, 0.75, 0.812, 0.86, 0.896, 0.924, 0.944, 0.96, 0.971, 0.979, 0.985, 0.989, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 1);
	}
}