/**
 * TurtleReport design tokens.
 *
 * Three tiers, each built only from the one above it:
 *   1. Primitives  (--tly-p-*)  raw palette values. Never used by components directly.
 *   2. Semantic    (--tly-*)    what a colour is for: surface, line, ink, primary, status, data series.
 *                               Light and dark themes only redefine this tier.
 *   3. Component   (--tly-*)    type, spacing, radius, elevation, control sizes, shell metrics.
 *
 * Scope: tokens live on body.tly-shell (added on TurtleReport screens only) so the
 * rest of wp-admin is untouched. Theme classes on <body>: tly-theme-light | -dark | -system.
 * .tly-rpt (the PDF) and .tly-light always use the light values, whatever the theme.
 *
 * Rules for components:
 * - Geometry: radius tokens only (2/3/4/6px); 50% only for real circles. No pills.
 * - Depth: surfaces are flat and bordered; --tly-shadow-pop only for layers that float
 *   over content (menus, drawer, Advisor). Never nest a bordered card inside a card:
 *   use a divider or spacing instead.
 * - Type: --tly-text-* only; nothing under 12px in the app; sentence-case labels.
 * - Colour: semantic tokens only; series colours mean data, status colours mean state.
 * - Motion: colour/state transitions with --tly-dur; no movement for decoration.
 */

@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(../fonts/inter-latin.woff2) format("woff2-variations"), url(../fonts/inter-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(../fonts/inter-latin-ext.woff2) format("woff2-variations"), url(../fonts/inter-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Primitives */
body.tly-shell,
.tly-rpt,
.tly-light {
	/* Neutral ramp: cool slate, 0 = white … 1000 = near-black. */
	--tly-p-white: #ffffff;
	--tly-p-gray-25: #f9fafb;
	--tly-p-gray-50: #f5f6f7;
	--tly-p-gray-75: #f0f0f1;
	--tly-p-gray-100: #eaecf0;
	--tly-p-gray-200: #d6dae1;
	--tly-p-gray-300: #c1c7d1;
	--tly-p-gray-400: #adb5c2;
	--tly-p-gray-500: #8e99aa;
	--tly-p-gray-550: #858fa0;
	--tly-p-gray-575: #7b8597;
	--tly-p-gray-600: #696778;
	--tly-p-gray-650: #565865;
	--tly-p-gray-680: #64707f;
	--tly-p-gray-700: #3e4a5c;
	--tly-p-gray-750: #2c3c4e;
	--tly-p-gray-800: #2f3448;
	--tly-p-gray-850: #253241;
	--tly-p-gray-900: #1c2732;
	--tly-p-gray-950: #151d26;
	--tly-p-gray-1000: #11171d;
	--tly-p-canvas: #f3f5fa;

	--tly-p-blue-50: #e6f2fe;
	--tly-p-blue-200: #9ccbff;
	--tly-p-blue-300: #6cb4ff;
	--tly-p-blue-400: #3b9bff;
	--tly-p-blue-500: #017ef3;
	--tly-p-blue-600: #0168c8;
	--tly-p-blue-800: #0b4f91;

	--tly-p-green-50: #e8f5f1;
	--tly-p-green-100: #d1eae4;
	--tly-p-green-400: #4cc9a3;
	--tly-p-green-500: #189877;
	--tly-p-green-700: #116a53;

	--tly-p-red-50: #fcebe6;
	--tly-p-red-100: #f8d6ce;
	--tly-p-red-400: #ff8a73;
	--tly-p-red-500: #f04438;
	--tly-p-red-700: #c72f08;

	--tly-p-amber-50: #fef4e6;
	--tly-p-amber-100: #fde8cd;
	--tly-p-amber-400: #f7a539;
	--tly-p-amber-500: #f58e07;
	--tly-p-amber-800: #71330a;

	/* Data series, light and dark-tuned pairs (dark ones keep ≥ 3:1 on the dark surface). */
	--tly-p-series-blue: #3567e0;
	--tly-p-series-blue-d: #6f95ff;
	--tly-p-series-violet: #7b54d4;
	--tly-p-series-violet-d: #a98bff;
	--tly-p-series-green: #16865a;
	--tly-p-series-green-d: #40c08b;
	--tly-p-series-orange: #c8691a;
	--tly-p-series-orange-d: #f0984d;
	--tly-p-series-rose: #c41d5e;
	--tly-p-series-rose-d: #f2689a;
	--tly-p-series-teal: #0d8ba1;
	--tly-p-series-teal-d: #3ec3d8;
	--tly-p-series-indigo: #4b4fd1;
	--tly-p-series-indigo-d: #8f92ff;
}

/* 2. Semantic: light */
body.tly-shell,
.tly-rpt,
.tly-light {
	color-scheme: light;

	/* Surfaces */
	--tly-bg: var(--tly-p-canvas);           /* page canvas behind cards */
	--tly-surface: var(--tly-p-white);       /* cards, bar, inputs */
	--tly-subtle: var(--tly-p-gray-25);      /* table heads, insets, stat wells */
	--tly-hover: var(--tly-p-gray-50);       /* row / item hover */
	--tly-active: var(--tly-p-gray-75);      /* selected nav item, pressed */
	--tly-overlay: rgba(17, 23, 29, .45);

	/* Lines */
	--tly-line: var(--tly-p-gray-100);       /* dividers, card borders */
	--tly-line-strong: var(--tly-p-gray-200);/* button outlines, table head rule */
	--tly-line-input: var(--tly-p-gray-575); /* form field borders: 3.7:1 on surface, 3.4:1 on the canvas (WCAG 1.4.11 needs 3:1) */

	/* Ink (text and icons) */
	--tly-ink: var(--tly-p-gray-800);        /* headings, key numbers */
	--tly-ink-2: var(--tly-p-gray-650);      /* body copy */
	--tly-muted: var(--tly-p-gray-600);      /* labels, helper text (≥ 4.5:1 on surface) */
	--tly-faint: var(--tly-p-gray-500);      /* icons, separators, hover borders. Not for text (2.9:1). */

	/* Actions */
	--tly-primary: var(--tly-p-gray-850);    /* primary button */
	--tly-primary-hover: var(--tly-p-gray-900);
	--tly-on-primary: var(--tly-p-white);
	--tly-accent: var(--tly-p-blue-600);     /* links, selection. One step darker than FluentCart's #017ef3 so text links pass AA (5.5:1). */
	--tly-accent-hover: var(--tly-p-blue-800);
	--tly-accent-mark: var(--tly-p-blue-500);/* non-text indicators: dots, focus ring colour */
	--tly-accent-bg: var(--tly-p-blue-50);
	--tly-accent-ink: var(--tly-p-blue-800);
	--tly-on-accent: var(--tly-p-white);
	--tly-focus: 0 0 0 2px var(--tly-surface), 0 0 0 4px var(--tly-accent-mark); /* opaque: 4:1 on white */

	/* Status: -ink for text on -bg, base for marks (dots, bars, icons). */
	--tly-good: var(--tly-p-green-500);
	--tly-good-ink: var(--tly-p-green-700);
	--tly-good-bg: var(--tly-p-green-50);
	--tly-good-line: var(--tly-p-green-100);
	--tly-bad: var(--tly-p-red-500);
	--tly-bad-ink: var(--tly-p-red-700);
	--tly-bad-bg: var(--tly-p-red-50);
	--tly-bad-line: var(--tly-p-red-100);
	--tly-warn: var(--tly-p-amber-500);
	--tly-warn-ink: var(--tly-p-amber-800);
	--tly-warn-bg: var(--tly-p-amber-50);
	--tly-warn-line: var(--tly-p-amber-100);
	--tly-flat-bg: var(--tly-p-gray-75);

	/* Data series (one meaning each, never reused for status). */
	--tly-clicks: var(--tly-p-series-blue);
	--tly-impr: var(--tly-p-series-violet);
	--tly-ctr: var(--tly-p-series-green);
	--tly-pos: var(--tly-p-series-orange);
	--tly-lead: var(--tly-p-series-rose);
	--tly-call: var(--tly-p-series-teal);
	--tly-ai: var(--tly-p-series-indigo);
	--tly-series-prev: var(--tly-p-gray-550);

	/* Elevation. Surfaces are flat and separated by borders; only layers that float
	 * over content (menus, the drawer, the Advisor panel) cast one restrained shadow. */
	--tly-shadow-xs: none;
	--tly-shadow-sm: none;
	--tly-shadow-bar: 0 1px 0 var(--tly-line);
	--tly-shadow-pop: 0 0 0 1px var(--tly-line-strong), 0 8px 24px rgba(14, 18, 27, .12);
}

/* 2. Semantic: dark */
body.tly-shell.tly-theme-dark {
	color-scheme: dark;
	--tly-bg: var(--tly-p-gray-1000);
	--tly-surface: var(--tly-p-gray-900);
	--tly-subtle: var(--tly-p-gray-950);
	--tly-hover: var(--tly-p-gray-850);
	--tly-active: var(--tly-p-gray-750);
	--tly-overlay: rgba(0, 0, 0, .6);
	--tly-line: var(--tly-p-gray-750);
	--tly-line-strong: var(--tly-p-gray-700);
	--tly-line-input: var(--tly-p-gray-680);
	--tly-ink: var(--tly-p-gray-50);
	--tly-ink-2: var(--tly-p-gray-300);
	--tly-muted: var(--tly-p-gray-400);
	--tly-faint: var(--tly-p-gray-500);
	--tly-primary: var(--tly-p-gray-50);
	--tly-primary-hover: var(--tly-p-white);
	--tly-on-primary: var(--tly-p-gray-900);
	--tly-accent: var(--tly-p-blue-400);
	--tly-accent-hover: var(--tly-p-blue-300);
	--tly-accent-mark: var(--tly-p-blue-400);
	--tly-accent-bg: rgba(59, 155, 255, .14);
	--tly-accent-ink: var(--tly-p-blue-200);
	--tly-on-accent: var(--tly-p-gray-1000);
	--tly-focus: 0 0 0 2px var(--tly-surface), 0 0 0 4px var(--tly-accent-mark);
	--tly-good: var(--tly-p-green-400);
	--tly-good-ink: var(--tly-p-green-400);
	--tly-good-bg: rgba(24, 152, 119, .16);
	--tly-good-line: rgba(24, 152, 119, .32);
	--tly-bad: var(--tly-p-red-400);
	--tly-bad-ink: var(--tly-p-red-400);
	--tly-bad-bg: rgba(240, 68, 56, .16);
	--tly-bad-line: rgba(240, 68, 56, .32);
	--tly-warn: var(--tly-p-amber-400);
	--tly-warn-ink: var(--tly-p-amber-400);
	--tly-warn-bg: rgba(245, 142, 7, .16);
	--tly-warn-line: rgba(245, 142, 7, .32);
	--tly-flat-bg: var(--tly-p-gray-850);
	--tly-clicks: var(--tly-p-series-blue-d);
	--tly-impr: var(--tly-p-series-violet-d);
	--tly-ctr: var(--tly-p-series-green-d);
	--tly-pos: var(--tly-p-series-orange-d);
	--tly-lead: var(--tly-p-series-rose-d);
	--tly-call: var(--tly-p-series-teal-d);
	--tly-ai: var(--tly-p-series-indigo-d);
	--tly-series-prev: var(--tly-p-gray-680);
	--tly-shadow-xs: none;
	--tly-shadow-sm: none;
	--tly-shadow-bar: 0 1px 0 var(--tly-p-gray-750);
	--tly-shadow-pop: 0 0 0 1px var(--tly-p-gray-700), 0 8px 24px rgba(0, 0, 0, .45);
}

/* "System" follows the operating system. Same values as the dark block above. */
@media (prefers-color-scheme: dark) {
	body.tly-shell.tly-theme-system {
		color-scheme: dark;
		--tly-bg: var(--tly-p-gray-1000);
		--tly-surface: var(--tly-p-gray-900);
		--tly-subtle: var(--tly-p-gray-950);
		--tly-hover: var(--tly-p-gray-850);
		--tly-active: var(--tly-p-gray-750);
		--tly-overlay: rgba(0, 0, 0, .6);
		--tly-line: var(--tly-p-gray-750);
		--tly-line-strong: var(--tly-p-gray-700);
		--tly-line-input: var(--tly-p-gray-680);
		--tly-ink: var(--tly-p-gray-50);
		--tly-ink-2: var(--tly-p-gray-300);
		--tly-muted: var(--tly-p-gray-400);
		--tly-faint: var(--tly-p-gray-500);
		--tly-primary: var(--tly-p-gray-50);
		--tly-primary-hover: var(--tly-p-white);
		--tly-on-primary: var(--tly-p-gray-900);
		--tly-accent: var(--tly-p-blue-400);
		--tly-accent-hover: var(--tly-p-blue-300);
		--tly-accent-mark: var(--tly-p-blue-400);
		--tly-accent-bg: rgba(59, 155, 255, .14);
		--tly-accent-ink: var(--tly-p-blue-200);
		--tly-on-accent: var(--tly-p-gray-1000);
		--tly-focus: 0 0 0 2px var(--tly-surface), 0 0 0 4px var(--tly-accent-mark);
		--tly-good: var(--tly-p-green-400);
		--tly-good-ink: var(--tly-p-green-400);
		--tly-good-bg: rgba(24, 152, 119, .16);
		--tly-good-line: rgba(24, 152, 119, .32);
		--tly-bad: var(--tly-p-red-400);
		--tly-bad-ink: var(--tly-p-red-400);
		--tly-bad-bg: rgba(240, 68, 56, .16);
		--tly-bad-line: rgba(240, 68, 56, .32);
		--tly-warn: var(--tly-p-amber-400);
		--tly-warn-ink: var(--tly-p-amber-400);
		--tly-warn-bg: rgba(245, 142, 7, .16);
		--tly-warn-line: rgba(245, 142, 7, .32);
		--tly-flat-bg: var(--tly-p-gray-850);
		--tly-clicks: var(--tly-p-series-blue-d);
		--tly-impr: var(--tly-p-series-violet-d);
		--tly-ctr: var(--tly-p-series-green-d);
		--tly-pos: var(--tly-p-series-orange-d);
		--tly-lead: var(--tly-p-series-rose-d);
		--tly-call: var(--tly-p-series-teal-d);
		--tly-ai: var(--tly-p-series-indigo-d);
		--tly-series-prev: var(--tly-p-gray-680);
		--tly-shadow-xs: none;
		--tly-shadow-sm: none;
		--tly-shadow-bar: 0 1px 0 var(--tly-p-gray-750);
		--tly-shadow-pop: 0 0 0 1px var(--tly-p-gray-700), 0 8px 24px rgba(0, 0, 0, .45);
	}
}

/* 3. Component tokens */
body.tly-shell,
.tly-rpt,
.tly-light {
	/* Type: Inter, 14px base, a short 1.125-ish scale. */
	--tly-font: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--tly-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--tly-text-xs: 12px;
	--tly-text-sm: 13px;
	--tly-text-base: 14px;
	--tly-text-md: 16px;
	--tly-text-lg: 18px;
	--tly-text-xl: 20px;
	--tly-text-2xl: 24px;
	--tly-text-3xl: 28px;
	--tly-leading-none: 1;
	--tly-leading-tight: 1.25;
	--tly-leading-snug: 1.4;
	--tly-leading: 1.5;
	--tly-weight: 400;
	--tly-weight-medium: 500;
	--tly-weight-semibold: 600;
	--tly-weight-bold: 700;
	--tly-tracking: .01em;
	--tly-tracking-tight: -.015em;

	/* Space: 4px grid. Spacing roles step up by roughly the golden ratio (≈1.6×):
	 * inline 4 (icon to text) → tight 8 (inside a group) → group 12 (between related items)
	 * → section 20 (between groups, card padding) → page 32 (between page sections).
	 * 2px (--tly-space-half) is only for hairline offsets inside one text block. */
	--tly-space-half: 2px;
	--tly-space-1: 4px;
	--tly-space-2: 8px;
	--tly-space-3: 12px;
	--tly-space-4: 16px;
	--tly-space-5: 20px;
	--tly-space-6: 24px;
	--tly-space-8: 32px;
	--tly-space-10: 40px;

	/* Radius: sharp geometry. Circles (status dots, avatars) use 50%; nothing is pill-shaped. */
	--tly-radius-xs: 2px;   /* bars, swatches, tiny marks */
	--tly-radius-sm: 3px;   /* badges, chips, small controls */
	--tly-radius: 4px;      /* buttons, inputs, cards, menus */
	--tly-radius-lg: 6px;   /* dialogs and floating panels */
	--tly-r: var(--tly-radius);

	/* Controls */
	--tly-ctl: 36px;
	--tly-ctl-sm: 32px;
	--tly-ctl-lg: 40px;
	--tly-shadow: var(--tly-shadow-xs);

	/* Components */
	--tly-badge-h: 20px;
	--tly-panel-head-h: 56px;
	--tly-label-col: 220px;
	--tly-measure: 72ch;      /* running text */

	/* Shell */
	--tly-bar-h: 60px;
	--tly-content-max: 1350px;
	--tly-gutter: 32px;

	/* Motion: short colour/state transitions only; no movement for decoration. */
	--tly-dur: .15s;
	--tly-ease: cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 782px) {
	body.tly-shell { --tly-gutter: 16px; --tly-bar-h: 56px; }
}