/* ============================================================================
   CityCar reps web - design tokens (UX plan, stage 1).

   The ONLY file in the client that may contain a literal color, font size or
   radius. Every other stylesheet and every inline style refers to these names,
   so the whole site changes from one place and stays consistent.
   tools/ux-metrics/Measure-UxStage1.ps1 enforces it.

   Roles, not hues: pick the token by what the element IS (a surface, secondary
   text, a blocking state), never by the color you want it to look like.
   ============================================================================ */
:root {
	/* --- surfaces --- */
	--bg: #F6F4F9;              /* page ground */
	--surface: #FFFFFF;         /* cards, tables, bars, inputs */
	--surface-2: #F1EDF6;       /* table headers, secondary areas, zebra rows */
	--surface-3: #E8E3EF;       /* pressed / hover on surface-2 */
	--border: #E2DCEA;          /* hairlines between things */
	--border-strong: #C9C1D4;   /* input outlines, separators that must be seen */

	/* --- text --- */
	--ink: #23202A;             /* primary text */
	--ink-2: #5B5566;           /* secondary text, labels */
	--ink-3: #6E6878;           /* hints, timestamps, disabled - still 4.5:1 on surface-2 */

	/* --- brand: the action color, used for the ONE primary action per screen,
	       the active tab/nav item and links. Not decoration. --- */
	--brand: #6F3996;
	--brand-strong: #57287A;    /* hover / pressed on brand */
	--brand-tint: #F1EAF8;      /* selected nav item, active filter chip */
	--brand-border: #D9C7EA;    /* outline of brand-tinted things */
	--brand-accent: #F5A623;    /* the orange of the logo: brand mark, favourite star, 'current' marker. Never a state. */
	--on-brand: #FFFFFF;        /* text and icons on a brand (or any solid state) fill */
	--on-brand-subtle: rgba(255, 255, 255, .18); /* translucent control on a brand fill */

	/* --- row selection in tables --- */
	--select: #E1ECFA;
	--select-strong: #C9DCF4;

	/* --- states: meaning only, never decoration. Each has a solid (text/border/
	       stripe) and a tint (background behind text of that state). --- */
	--danger: #C62828;
	--danger-strong: #9A1C1C;
	--danger-tint: #FDECEC;
	--warn: #A35F00;
	--warn-tint: #FFF3DF;
	--warn-border: #F0CF9A;
	--ok: #246838;
	--ok-tint: #E6F4EA;
	--ok-border: #B6E0C2;
	--info: #1F6FB2;
	--info-tint: #E7F1FA;

	/* --- categorical: a small fixed set for things that are told apart by color
	       but are not states (e.g. the source of a history row, a calendar booking
	       type). Use in this order; never more than six on one screen. --- */
	--cat-1: #6F3996;
	--cat-2: #1F6FB2;
	--cat-3: #276E3A;
	--cat-4: #A35F00;
	--cat-5: #B0306B;
	--cat-6: #5B5566;

	/* --- depth: only dialogs, menus and floating panels get a shadow --- */
	--shadow-color: rgba(35, 32, 42, .16);
	--shadow-sm: 0 1px 3px var(--shadow-color);
	--shadow-md: 0 8px 24px var(--shadow-color);
	--overlay: rgba(21, 19, 26, .45);   /* scrim behind a modal */
	--focus-ring: rgba(111, 57, 150, .28);

	/* --- type: five sizes, nothing below 12px --- */
	--fs-xs: 12px;   /* captions, meta, timestamps, labels above fields */
	--fs-sm: 13px;   /* tables and fields (compact density) */
	--fs-md: 14px;   /* body text */
	--fs-lg: 16px;   /* section headings inside a card */
	--fs-xl: 20px;   /* card title (order / subscriber name), the final price */
	--font: "Segoe UI", Arial, sans-serif;

	/* --- shape: three radii --- */
	--r-sm: 4px;     /* inputs, buttons */
	--r-md: 8px;     /* cards, dialogs, panels */
	--r-pill: 999px; /* tags, chips, avatars */

	/* --- spacing scale (4px grid) --- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;

	/* --- density (stage 2): "compact" is the default for a long shift on a laptop;
	       "comfortable" is the rep's choice in the display menu (html[data-density]). --- */
	--row-h: 28px;        /* one table row */
	--head-h: 32px;       /* table header row (also the sticky offset of the filter row) */
	--ctl-h: 28px;        /* inputs, selects, buttons */
	--cell-px: 8px;       /* horizontal padding inside a table cell */
	--density-font: var(--fs-sm);

	color-scheme: light;
}

:root[data-density="comfortable"] {
	--row-h: 36px;
	--head-h: 38px;
	--ctl-h: 34px;
	--cell-px: 12px;
	--density-font: var(--fs-md);
}

/* --- dark theme (stage 2) ---------------------------------------------------
   Same token NAMES, different values. Two blocks with the same body: the first
   follows the computer's setting unless the rep picked "light"; the second wins
   when the rep explicitly picked "dark" (html[data-theme]). Keep them identical. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #15131A; --surface: #1E1B25; --surface-2: #27232F; --surface-3: #312C3A;
		--border: #3A3442; --border-strong: #514A5C;
		--ink: #ECE8F2; --ink-2: #B5AEC0; --ink-3: #9A93A6;
		--brand: #B58AD8; --brand-strong: #CFAEEA; --brand-tint: #2D2238; --brand-border: #4A3A5E;
		--brand-accent: #F5B54A; --on-brand: #15131A; --on-brand-subtle: rgba(21, 19, 26, .18);
		--select: #253350; --select-strong: #304266;
		--danger: #F07878; --danger-strong: #F49A9A; --danger-tint: #3A1E22;
		--warn: #E9A84B; --warn-tint: #3A2C17; --warn-border: #6B5124;
		--ok: #6BC184; --ok-tint: #1B3224; --ok-border: #2F5A3C;
		--info: #72B2EA; --info-tint: #1A2A3B;
		--cat-1: #B58AD8; --cat-2: #72B2EA; --cat-3: #6BC184; --cat-4: #E9A84B; --cat-5: #E883B3; --cat-6: #B5AEC0;
		--shadow-color: rgba(0, 0, 0, .5); --overlay: rgba(0, 0, 0, .6); --focus-ring: rgba(181, 138, 216, .4);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--bg: #15131A; --surface: #1E1B25; --surface-2: #27232F; --surface-3: #312C3A;
	--border: #3A3442; --border-strong: #514A5C;
	--ink: #ECE8F2; --ink-2: #B5AEC0; --ink-3: #9A93A6;
	--brand: #B58AD8; --brand-strong: #CFAEEA; --brand-tint: #2D2238; --brand-border: #4A3A5E;
	--brand-accent: #F5B54A; --on-brand: #15131A; --on-brand-subtle: rgba(21, 19, 26, .18);
	--select: #253350; --select-strong: #304266;
	--danger: #F07878; --danger-strong: #F49A9A; --danger-tint: #3A1E22;
	--warn: #E9A84B; --warn-tint: #3A2C17; --warn-border: #6B5124;
	--ok: #6BC184; --ok-tint: #1B3224; --ok-border: #2F5A3C;
	--info: #72B2EA; --info-tint: #1A2A3B;
	--cat-1: #B58AD8; --cat-2: #72B2EA; --cat-3: #6BC184; --cat-4: #E9A84B; --cat-5: #E883B3; --cat-6: #B5AEC0;
	--shadow-color: rgba(0, 0, 0, .5); --overlay: rgba(0, 0, 0, .6); --focus-ring: rgba(181, 138, 216, .4);
	color-scheme: dark;
}