/* Shared design tokens for the account desk (/kam) and the field app (/field).
   Served at /assets/unwind_kam/ds/tokens.css. Link it before the app's own stylesheet.
   Theme:     <html data-theme="dark|light">  (unset = follow prefers-color-scheme)
   Text size: <html data-text="large|xl">     (unset = standard)
   Accent:    set --acc on <html> at runtime (chain / brand colour); every derived accent token follows it.
   See README.md in this folder for the token list and the rules. */

@font-face { font-family: "Inter Var"; src: url("../vendor/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono Var"; src: url("../vendor/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

/* ------------------------------------------------------------------ theme-independent + dark (default) */
:root {
	color-scheme: dark;

	/* accent (runtime-overridable) */
	--acc: #1a8cff;
	--acc-2: color-mix(in srgb, var(--acc) 38%, #22d3ee);
	--acc-ink: #ffffff;
	--acc-text: var(--acc-2);                      /* accent used as text/icon colour */
	--acc-soft: color-mix(in srgb, var(--acc) 16%, transparent);
	--acc-line: color-mix(in srgb, var(--acc) 45%, transparent);
	--acc-glow: 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent), 0 0 24px -4px color-mix(in srgb, var(--acc-2) 45%, transparent);
	--acc-bar: var(--acc-2);                       /* active-tab / active-nav indicator */
	--acc-bar-glow: 0 0 10px var(--acc-2);

	/* surfaces */
	--bg: #05070d;
	--bg-2: #080b14;
	--surface: rgba(16, 21, 34, 0.72);
	--surface-solid: #0e1320;
	--surface-2: rgba(24, 31, 49, 0.78);
	--surface-3: #161d2e;
	--raised: #121829;
	--field-bg: var(--bg-2);                       /* input background */
	--hover: rgba(148, 170, 214, 0.07);
	--press: rgba(148, 170, 214, 0.12);

	/* lines */
	--line: rgba(148, 170, 214, 0.11);
	--line-2: rgba(148, 170, 214, 0.18);
	--line-3: rgba(148, 170, 214, 0.28);
	--grid: rgba(120, 150, 210, 0.055);

	/* text */
	--text: #e6ebf5;
	--text-2: #a4afc4;
	--text-3: #6f7a91;
	--text-4: #4b5468;

	/* semantic */
	--ok: #34d399;
	--ok-soft: rgba(52, 211, 153, 0.13);
	--warn: #fbbf24;
	--warn-soft: rgba(251, 191, 36, 0.13);
	--bad: #f87171;
	--bad-soft: rgba(248, 113, 113, 0.13);
	--info: #60a5fa;
	--info-soft: rgba(96, 165, 250, 0.13);
	--violet: #a78bfa;
	--violet-soft: rgba(167, 139, 250, 0.14);

	/* chart series (forecast layers) */
	--s-baseline: color-mix(in srgb, var(--acc) 78%, #0b1224);
	--s-fill: var(--acc-2);
	--s-lift: #a78bfa;
	--s-dip: #f59e0b;
	--s-delist: #f87171;
	--s-actual: #f5f7fb;

	/* depth */
	--shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -12px rgba(0, 0, 0, 0.7);
	--shadow-3: 0 24px 64px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line-2);
	--blur: saturate(140%) blur(16px);
	--backdrop: rgba(2, 4, 10, 0.62);
	--backdrop-blur: blur(3px);
	--glow-opacity: 1;                             /* multiplier for decorative glows (hero scanlines, pulses) */

	/* focus */
	--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc-2);
	--focus-outline: 2px solid var(--acc-2);

	/* fonts */
	--sans: "Inter Var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--mono: "JetBrains Mono Var", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

	/* labels: uppercase tracked micro-labels in dark; sentence case in light */
	--label-transform: uppercase;
	--label-tracking: 0.12em;
	--label-weight: 600;

	/* type scale: the *-base sizes change per theme, --text-scale per text-size setting */
	--text-scale: 1;
	--fs-3xs-base: 9px;
	--fs-2xs-base: 10px;
	--fs-micro-base: 10.5px;
	--fs-xs-base: 11.5px;
	--fs-sm-base: 12.5px;
	--fs-md-base: 13.5px;
	--fs-lg-base: 15px;
	--fs-xl-base: 18px;
	--fs-2xl-base: 24px;
	--fs-3xl-base: 32px;
	--fs-hero-base: 40px;
	--fs-stat-base: 28px;                          /* big KPI numbers */
	--fs-3xs: calc(var(--fs-3xs-base) * var(--text-scale));
	--fs-2xs: calc(var(--fs-2xs-base) * var(--text-scale));
	--fs-micro: calc(var(--fs-micro-base) * var(--text-scale));
	--fs-xs: calc(var(--fs-xs-base) * var(--text-scale));
	--fs-sm: calc(var(--fs-sm-base) * var(--text-scale));
	--fs-md: calc(var(--fs-md-base) * var(--text-scale));
	--fs-lg: calc(var(--fs-lg-base) * var(--text-scale));
	--fs-xl: calc(var(--fs-xl-base) * var(--text-scale));
	--fs-2xl: calc(var(--fs-2xl-base) * var(--text-scale));
	--fs-3xl: calc(var(--fs-3xl-base) * var(--text-scale));
	--fs-hero: calc(var(--fs-hero-base) * var(--text-scale));
	--fs-stat: calc(var(--fs-stat-base) * var(--text-scale));
	--lh: 1.45;
	/* for the odd one-off size (chart ticks, big numerals): calc(11px * var(--fs-k)) follows theme + text size;
	   sizes of 17px and up use --fs-kl; wrap small ones in max(var(--fs-min), …) so light never drops under 12.5px */
	--type-k: 1;
	--type-k-lg: 1;
	--fs-k: calc(var(--type-k) * var(--text-scale));
	--fs-kl: calc(var(--type-k-lg) * var(--text-scale));
	--fs-min: 0px;

	/* control sizes (hit targets) — grow with text size, a little slower than the text */
	--ctl-scale: calc(1 + (var(--text-scale) - 1) * 0.7);
	--ctl-h-base: 34px;
	--ctl-h-sm-base: 28px;
	--ctl-h-lg-base: 40px;
	--ctl-h: calc(var(--ctl-h-base) * var(--ctl-scale));
	--ctl-h-sm: calc(var(--ctl-h-sm-base) * var(--ctl-scale));
	--ctl-h-lg: calc(var(--ctl-h-lg-base) * var(--ctl-scale));
	--icon: calc(16px * var(--ctl-scale));

	/* radii */
	--r-sm: 6px;
	--r: 10px;
	--r-lg: 14px;
	--r-xl: 18px;
	--r-pill: 999px;

	/* layout */
	--rail-w-base: 216px;
	--rail-w: calc(var(--rail-w-base) * var(--ctl-scale));
	--top-h: calc(56px * var(--ctl-scale));
	--gutter: 24px;

	/* motion */
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--t-fast: 120ms;
	--t: 220ms;
	--t-slow: 480ms;
}

/* ------------------------------------------------------------------ text size */
:root[data-text="large"] { --text-scale: 1.15; }
:root[data-text="xl"] { --text-scale: 1.3; }

/* ------------------------------------------------------------------ light: calm, legible, same product
   near-white page, white cards with firm borders, near-black text (all text tokens >= 4.5:1 on white and on --bg),
   16.5 px body, sentence-case labels >= 13 px, 44 px controls, no glass. */
[data-theme="light"] {
	color-scheme: light;
	--acc-text: color-mix(in srgb, var(--acc) 82%, #000);
	--acc-soft: color-mix(in srgb, var(--acc) 11%, #fff);
	--acc-line: color-mix(in srgb, var(--acc) 55%, #fff);
	--acc-glow: 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent);
	--acc-bar: var(--acc);
	--acc-bar-glow: none;

	--bg: #f4f5f8;
	--bg-2: #eaedf2;
	--surface: #ffffff;
	--surface-solid: #ffffff;
	--surface-2: #f7f8fa;
	--surface-3: #eef0f4;
	--raised: #ffffff;
	--field-bg: #ffffff;
	--hover: #eef2f8;
	--press: #e3e8f0;

	--line: #d5dae3;
	--line-2: #bcc3cf;
	--line-3: #8f98a8;
	--grid: rgba(20, 50, 110, 0.05);

	--text: #111827;
	--text-2: #2f3a4d;   /* 11.6:1 on white */
	--text-3: #4a5568;   /* 7.5:1 on white */
	--text-4: #5f6b7e;   /* 5.4:1 on white, placeholders */

	--ok: #047857;
	--ok-soft: #e3f5ec;
	--warn: #92400e;
	--warn-soft: #fdf1dc;
	--bad: #b91c1c;
	--bad-soft: #fde8e8;
	--info: #1d4ed8;
	--info-soft: #e5edfd;
	--violet: #6d28d9;
	--violet-soft: #efe8fd;

	--s-baseline: var(--acc);
	--s-fill: #0e7490;
	--s-lift: #7c3aed;
	--s-dip: #c2410c;
	--s-delist: #b91c1c;
	--s-actual: #111827;

	--shadow-1: 0 1px 2px rgba(15, 25, 50, 0.07);
	--shadow-2: 0 1px 2px rgba(15, 25, 50, 0.06), 0 4px 14px -8px rgba(15, 25, 50, 0.16);
	--shadow-3: 0 20px 50px -16px rgba(15, 25, 50, 0.32), 0 0 0 1px var(--line-2);
	--blur: none;
	--backdrop: rgba(17, 24, 39, 0.45);
	--backdrop-blur: none;
	--glow-opacity: 0;

	--focus-ring: 0 0 0 2px #fff, 0 0 0 5px var(--acc);
	--focus-outline: 3px solid var(--acc);

	--label-transform: none;
	--label-tracking: 0;
	--label-weight: 600;

	--fs-3xs-base: 12px;
	--fs-2xs-base: 12.5px;
	--fs-micro-base: 13px;
	--fs-xs-base: 13.5px;
	--fs-sm-base: 14.5px;
	--fs-md-base: 16.5px;
	--fs-lg-base: 18px;
	--fs-xl-base: 21px;
	--fs-2xl-base: 27px;
	--fs-3xl-base: 34px;
	--fs-hero-base: 42px;
	--fs-stat-base: 30px;
	--lh: 1.5;
	--type-k: 1.22;
	--type-k-lg: 1.08;
	--fs-min: 12.5px;

	--ctl-h-base: 44px;
	--ctl-h-sm-base: 40px;
	--ctl-h-lg-base: 48px;
	--rail-w-base: 236px;
	--top-h: calc(64px * var(--ctl-scale));
}

/* unset theme follows the system (dark stays the default when the system has no preference) */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		color-scheme: light;
		--acc-text: color-mix(in srgb, var(--acc) 82%, #000);
		--acc-soft: color-mix(in srgb, var(--acc) 11%, #fff);
		--acc-line: color-mix(in srgb, var(--acc) 55%, #fff);
		--acc-glow: 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent);
		--acc-bar: var(--acc);
		--acc-bar-glow: none;
		--bg: #f4f5f8; --bg-2: #eaedf2; --surface: #ffffff; --surface-solid: #ffffff; --surface-2: #f7f8fa; --surface-3: #eef0f4;
		--raised: #ffffff; --field-bg: #ffffff; --hover: #eef2f8; --press: #e3e8f0;
		--line: #d5dae3; --line-2: #bcc3cf; --line-3: #8f98a8; --grid: rgba(20, 50, 110, 0.05);
		--text: #111827; --text-2: #2f3a4d; --text-3: #4a5568; --text-4: #5f6b7e;
		--ok: #047857; --ok-soft: #e3f5ec; --warn: #92400e; --warn-soft: #fdf1dc; --bad: #b91c1c; --bad-soft: #fde8e8;
		--info: #1d4ed8; --info-soft: #e5edfd; --violet: #6d28d9; --violet-soft: #efe8fd;
		--s-baseline: var(--acc); --s-fill: #0e7490; --s-lift: #7c3aed; --s-dip: #c2410c; --s-delist: #b91c1c; --s-actual: #111827;
		--shadow-1: 0 1px 2px rgba(15, 25, 50, 0.07);
		--shadow-2: 0 1px 2px rgba(15, 25, 50, 0.06), 0 4px 14px -8px rgba(15, 25, 50, 0.16);
		--shadow-3: 0 20px 50px -16px rgba(15, 25, 50, 0.32), 0 0 0 1px var(--line-2);
		--blur: none; --backdrop: rgba(17, 24, 39, 0.45); --backdrop-blur: none; --glow-opacity: 0;
		--focus-ring: 0 0 0 2px #fff, 0 0 0 5px var(--acc); --focus-outline: 3px solid var(--acc);
		--label-transform: none; --label-tracking: 0; --label-weight: 600;
		--fs-3xs-base: 12px; --fs-2xs-base: 12.5px; --fs-micro-base: 13px; --fs-xs-base: 13.5px; --fs-sm-base: 14.5px; --fs-md-base: 16.5px;
		--fs-lg-base: 18px; --fs-xl-base: 21px; --fs-2xl-base: 27px; --fs-3xl-base: 34px; --fs-hero-base: 42px; --fs-stat-base: 30px; --lh: 1.5; --type-k: 1.22; --type-k-lg: 1.08; --fs-min: 12.5px;
		--ctl-h-base: 44px; --ctl-h-sm-base: 40px; --ctl-h-lg-base: 48px; --rail-w-base: 236px; --top-h: calc(64px * var(--ctl-scale));
	}
}

/* shared helpers every app can rely on */
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 0; letter-spacing: -0.01em; }
.micro { font-size: var(--fs-micro); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: var(--label-transform); color: var(--text-3); }