/*
 * GEN-306 Admin UI v2 - design tokens.
 *
 * Every other ui-v2 file uses these variables; no raw colour, size or spacing values outside
 * this file. Dark values follow the AD-3225 switch (class np-dark on <html>, see
 * Scripts/np-theme.js). The rail colour comes from the domain's BrandColor, which Site.Master
 * writes as --v2-brand (and --v2-brand-text when the brand colour is light).
 *
 * Linked with data-np-dark="1" so np-theme.js does not try to darken this sheet a second time.
 */
:root {
	/* ---------- Typography ---------- */
	--font-sans: "IBM Plex Sans", "Noto Sans Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

	--fs-11: 11px;   /* rail labels, eyebrow text (uppercase) */
	--fs-12: 12px;   /* captions, table headers, pills, meta labels */
	--fs-13: 13px;   /* secondary text, mono IDs, small buttons */
	--fs-14: 14px;   /* base: body, table cells, inputs, buttons */
	--fs-16: 16px;   /* panel titles */
	--fs-18: 18px;   /* section titles (h2) */
	--fs-22: 22px;   /* compact record title */
	--fs-26: 26px;   /* page title (h1) */
	--lh-tight: 1.2;
	--lh-base: 1.5;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ---------- Neutrals ---------- */
	--c-bg: #FAFAFA; /* page background (html and body) */
	--c-surface: #FFFFFF;
	--c-surface-2: #F8FAFC;
	--c-surface-3: #F1F5F9;
	--c-border: #ccc;
	--c-border-row: #EEF2F6;
	--c-border-input: #ccc;
	--c-border-hover: #94A3B8;

	--c-text: #0F172A;
	--c-text-2: #334155;
	--c-text-muted: #475569;
	--c-text-subtle: #64748B;

	/* ---------- Brand ---------- */
	--c-nav: var(--v2-brand, #0E123A);
	--c-nav-text: var(--v2-brand-text, #B8C2D6);
	--c-nav-text-strong: var(--v2-brand-text-strong, #FFFFFF);
	--c-nav-hover-bg: var(--v2-brand-hover, rgba(255, 255, 255, .08));
	--c-nav-active-bg: var(--v2-brand-active, rgba(255, 255, 255, .16));
	--c-accent: #167F68; /* Coriunder green (#178D72 on the company site, a shade darker for 4.5:1 with white text) */
	--c-accent-hover: #10624F;
	--c-accent-text: #0F5C4A;
	--c-accent-soft: #E6F4EF;
	--c-accent-border: #8FCFBC;
	--c-on-accent: #FFFFFF;

	/* ---------- Semantic (bg / text / dot) ---------- */
	--c-success-bg: #DCFCE7; --c-success-text: #166534; --c-success: #16A34A;
	--c-warning-bg: #FEF3C7; --c-warning-text: #92400E; --c-warning: #D97706;
	--c-danger-bg: #FEE2E2;  --c-danger-text: #991B1B;  --c-danger: #DC2626;
	--c-info-bg: #DBEAFE;    --c-info-text: #1E40AF;    --c-info: #2563EB;
	--c-orange-bg: #FFEDD5;  --c-orange-text: #9A3412;
	--c-teal-bg: #CCFBF1;    --c-teal-text: #115E59;
	--c-purple-bg: #F3E8FF;  --c-purple-text: #6B21A8;
	--c-neutral-bg: #F1F5F9; --c-neutral-text: #334155; --c-neutral: #94A3B8;
	--c-dirty-row: #FFFBEB;
	--c-scrim: rgba(15, 23, 42, .45);
	--c-tooltip-bg: #0F172A;
	--c-tooltip-text: #FFFFFF;
	--c-media-bg: #000000;

	/* ---------- Spacing (4px scale) ---------- */
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
	--sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

	/* ---------- Radius ---------- */
	--r-sm: 6px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-alert: 10px; /* alerts / callouts */
	--r-pill: 999px;

	/* ---------- Elevation ---------- */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
	--shadow-lg: 0 10px 30px rgba(15, 23, 42, .15);

	/* ---------- Sizes ---------- */
	--header-h: 64px; /* the sticky v2 header (shell.css); sticky record parts and section navs sit under it. 64px (was 50) so
	   it matches the dialog headers: icon tile, title and subtitle (2026-10-19 review) */
	--record-nav-w: 220px;
	--palette-w: 640px;
	--control-h: 36px;
	--control-h-sm: 32px;
	--icon: 18px;
	--icon-sm: 15px;
	--row-h: 52px;
	--row-h-dense: 44px;
	--content-max: 1360px;

	/* ---------- Motion ---------- */
	--ease: cubic-bezier(.2, .8, .2, 1);
	--dur-fast: 120ms;
	--dur: 180ms;

	/* ---------- Z-index ---------- */
	--z-sticky: 10; --z-header: 1020; --z-rail: 1030; --z-flyout: 1040;
	--z-panel: 1050; --z-dialog: 1060; --z-toast: 1070; --z-palette: 1080;
}

/* Dark theme (AD-3225 switch). */
html.np-dark {
	color-scheme: dark;
	--c-bg: #0B1020; --c-surface: #111827; --c-surface-2: #0F172A; --c-surface-3: #1E293B;
	--c-border: #1E293B; --c-border-row: #1A2335; --c-border-input: #334155; --c-border-hover: #475569;
	--c-text: #F1F5F9; --c-text-2: #CBD5E1; --c-text-muted: #94A3B8; --c-text-subtle: #8191A8;
	--c-nav: #070A1F;
	--c-nav-text: #94A3B8;
	--c-nav-text-strong: #FFFFFF;
	--c-nav-hover-bg: rgba(255, 255, 255, .06);
	--c-nav-active-bg: rgba(255, 255, 255, .12);
	--c-accent: #178D72; --c-accent-hover: #1FA585; --c-accent-text: #A7E8D3;
	--c-accent-soft: rgba(43, 184, 143, .16); --c-accent-border: #167F68;
	--c-success-bg: rgba(22, 163, 74, .18);  --c-success-text: #86EFAC;
	--c-warning-bg: rgba(217, 119, 6, .18);  --c-warning-text: #FCD34D;
	--c-danger-bg: rgba(220, 38, 38, .18);   --c-danger-text: #FCA5A5;
	--c-info-bg: rgba(37, 99, 235, .18);     --c-info-text: #93C5FD;
	--c-orange-bg: rgba(234, 88, 12, .18);   --c-orange-text: #FDBA74;
	--c-teal-bg: rgba(13, 148, 136, .18);    --c-teal-text: #5EEAD4;
	--c-purple-bg: rgba(147, 51, 234, .20);  --c-purple-text: #D8B4FE;
	--c-neutral-bg: #1E293B; --c-neutral-text: #CBD5E1;
	--c-dirty-row: rgba(217, 119, 6, .10);
	--c-scrim: rgba(2, 6, 23, .6);
	--c-tooltip-bg: #E2E8F0;
	--c-tooltip-text: #0F172A;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
	--shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);
}