/* fateh_erp_v2/public/css/fateh_tokens.css
 * Fateh ERP v2 — the ONE token file. Every colour, size, radius and shadow the
 * app draws comes from here; fateh_erp_v2.css (and the page JS) contain no
 * colour literals. Loaded FIRST (hooks.py app_include_css = [tokens, main]) and
 * on website pages via web_include_css (login page).
 *
 * Surfaces / text / lines are ALIASES of Frappe's own theme variables
 * (--card-bg, --bg-color, --text-color, --border-color, --control-bg ...), so
 * light, dark and RTL work by construction: Frappe flips its variables on
 * html[data-theme], our tokens follow. On web pages Frappe's desk variables do
 * not exist, so those aliases are simply invalid there and consumers (login)
 * must give a var() fallback.
 *
 * Only :root / html[data-theme] / html[data-fateh-palette] / [dir=rtl] and
 * body.enfono-* variable overrides live here — no layout rules.
 * Theme mode  : html[data-theme] (light|dark) set by public/js/fateh_shell.js.
 * Accent      : html[data-fateh-palette] (indigo is the :root default).
 */

/* ── Light theme / defaults ─────────────────────────────────────────────── */
:root {
	/* brand: indigo is the default palette */
	--fateh-primary: #6366f1;
	--fateh-primary-hover: #4f46e5;
	--fateh-primary-soft: rgba(99, 102, 241, 0.20);
	--fateh-primary-tint: rgba(99, 102, 241, 0.10);
	--fateh-primary-text: #4f46e5;   /* accent as TEXT/stroke: >= 4.5:1 on the surface */
	--fateh-on-primary: #ffffff;
	/* solid fills (buttons, avatars, active pills) carrying --fateh-on-primary text: the hover shade is
	 * >= 5.0:1 against white in all five palettes (plain --fateh-primary is 3.30:1 for green). The plain
	 * --fateh-primary stays the decorative accent. */
	--fateh-primary-solid: var(--fateh-primary-hover);

	/* palette swatches for the Appearance modal (independent of the active palette) */
	--fateh-pal-indigo: #6366f1;
	--fateh-pal-green: #16a34a;
	--fateh-pal-ocean: #2563eb;
	--fateh-pal-rose: #e11d48;
	--fateh-pal-slate: #334155;

	/* surfaces, text, lines — aliases of Frappe's theme variables */
	--fateh-canvas: #f4f5fa;
	--fateh-surface: var(--card-bg);
	--fateh-surface-2: var(--subtle-fg);
	--fateh-input-bg: #ffffff;
	--fateh-line: var(--border-color);
	--fateh-text: var(--text-color);
	--fateh-text-muted: var(--text-muted);
	--fateh-heading: var(--heading-color);
	--fateh-hover: var(--fg-hover-color);

	/* chrome: the dark header + rail (one set per theme) */
	--fateh-chrome-bg: #15161e;
	--fateh-chrome-bg-2: #1e2029;
	--fateh-chrome-bg-3: #2a2c3d;
	--fateh-chrome-line: rgba(255, 255, 255, 0.08);
	--fateh-chrome-fg: #eceef6;
	--fateh-chrome-fg-strong: #ffffff;
	--fateh-chrome-muted: #9aa0b5;

	/* semantic status pairs — Frappe's own pairs, so they flip in dark mode */
	--fateh-success-bg: var(--bg-green);
	--fateh-success-fg: var(--text-on-green);
	/* warn: Frappe's yellow pair is 3.93:1 (light) / 4.11:1 (dark), below the 4.5:1 AA floor for 11px pill text, so only this pair is darkened */
	--fateh-warn-bg: var(--bg-yellow);
	--fateh-warn-fg: #92400e;
	--fateh-danger-bg: var(--bg-red);
	--fateh-danger-fg: var(--text-on-red);
	--fateh-info-bg: var(--bg-blue);
	--fateh-info-fg: var(--text-on-blue);
	--fateh-neutral-bg: var(--bg-gray);
	--fateh-neutral-fg: var(--text-on-gray);
	--fateh-purple-bg: var(--bg-purple);
	--fateh-purple-fg: var(--text-on-purple);

	/* accent icon tiles (white glyph, >= 3:1 in both themes) */
	--fateh-accent-blue: #2563eb;
	--fateh-accent-green: #16a34a;
	--fateh-accent-teal: #0d9488;
	--fateh-accent-orange: #ea580c;
	--fateh-accent-amber: #d97706;
	--fateh-accent-purple: #7c3aed;
	--fateh-accent-indigo: var(--fateh-primary);
	--fateh-accent-red: #dc2626;
	--fateh-accent-pink: #db2777;
	--fateh-accent-cyan: #0891b2;

	/* chart series (categorical, >= 3:1 on --fateh-surface in both themes) */
	--fateh-chart-1: var(--fateh-primary-text);
	--fateh-chart-2: #ea580c;
	--fateh-chart-3: #16a34a;
	--fateh-chart-4: #0d9488;
	--fateh-chart-5: #db2777;
	--fateh-chart-6: #8b5cf6;

	/* sizing */
	--fateh-header-h: 56px;
	--fateh-rail-w: 244px;
	--fateh-rail-w-collapsed: 62px;
	--fateh-content-max: 1480px;
	--fateh-tap: 44px;
	--fateh-radius-sm: 8px;
	--fateh-radius-md: 12px;
	--fateh-radius-lg: 14px;

	/* Phase 3a: rhythm, navigation sizes, layers, motion */
	--fateh-space-1: 4px;
	--fateh-space-2: 8px;
	--fateh-space-3: 12px;
	--fateh-space-4: 16px;
	--fateh-space-5: 20px;
	--fateh-space-6: 24px;
	--fateh-space-7: 32px;
	--fateh-space-8: 48px;
	--fateh-bar-h: 56px;
	--fateh-bottombar-h: 56px;
	--fateh-nav-item-h: 40px;
	--fateh-flyout-w: 240px;
	--fateh-z-rail: 1009;
	--fateh-z-flyout: 1020;
	--fateh-z-sheet: 1060;
	--fateh-z-palette: 1080;
	--fateh-z-toast: 1090;
	--fateh-dur-fast: 150ms;
	--fateh-dur: 220ms;
	--fateh-ease: cubic-bezier(0.2, 0, 0, 1);

	/* Phase 3a components (consumed by the nav now, by the report / list / form templates in 3c / 3d).
	 * Colour-bearing ones alias tokens that already flip in dark mode. */
	--fateh-chip-h: 32px;
	--fateh-chip-bg: var(--fateh-surface-2);
	--fateh-chip-border: var(--fateh-line);
	--fateh-chip-active-bg: var(--fateh-primary-tint);
	--fateh-card-pad: var(--fateh-space-4);
	--fateh-paper-bg: var(--fateh-surface);
	--fateh-paper-line: var(--fateh-line);
	--fateh-paper-subtotal-bg: var(--fateh-surface-2);
	--fateh-paper-total-line: var(--fateh-text-muted);
	--fateh-nav-active-bg: var(--fateh-chrome-bg-3);
	--fateh-nav-indicator: var(--fateh-chrome-fg-strong);
	/* 4a: aliases of the dark chrome, so legacy sites, dark mode and fateh_chrome=dark resolve exactly as before;
	 * the light chrome block below is the only place that redefines them */
	--fateh-nav-active-fg: var(--fateh-chrome-fg-strong);
	--fateh-nav-active-icon: var(--fateh-chrome-fg-strong);
	--fateh-chrome-input-bg: var(--fateh-chrome-bg-2);
	--fateh-chrome-input-line: var(--fateh-chrome-line);

	/* shadows + overlay */
	--fateh-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
	--fateh-shadow-md: 0 16px 30px -18px rgba(16, 24, 40, 0.42);
	--fateh-shadow-lg: 0 24px 48px -20px rgba(2, 6, 23, 0.5);
	--fateh-scroll-shadow: rgba(16, 24, 40, 0.22);   /* drawer shadow */
	--fateh-scroll-edge: rgba(16, 24, 40, 0.10);     /* scroll-edge gradient: light enough that text over it keeps 4.5:1 */
	--fateh-overlay: rgba(15, 23, 42, 0.45);
	--fateh-ring: rgba(255, 255, 255, 0.55);
	--fateh-fade: var(--card-bg);    /* scroll-edge fade colour = the surface it fades into */

	/* RTL helper: multiply physical offsets (translate, shadow x, rotate) by this */
	--fateh-dir: 1;

	/* login page (web template; no Frappe desk variables there) */
	--fateh-login-ink: #122a63;
	--fateh-login-ink-2: #1d2b4f;
	--fateh-login-muted: #6b7a90;
	--fateh-login-muted-2: #9aa8bd;
	--fateh-login-icon: #74808b;
	--fateh-login-line: #e6edf7;
	--fateh-login-line-2: #dbe4f0;
	--fateh-login-line-3: #c9d6ea;
	--fateh-login-wash: #f4f8ff;
	--fateh-login-wash-2: #eef4ff;
	--fateh-login-paper: #ffffff;
	--fateh-login-glow-1: rgba(47, 155, 255, 0.10);
	--fateh-login-glow-2: rgba(11, 46, 138, 0.08);
	--fateh-login-shadow: 0 12px 40px rgba(18, 42, 99, 0.10);
	--fateh-login-ring: rgba(30, 111, 224, 0.12);
}

/* ── Palettes (accent) — light ──────────────────────────────────────────── */
html[data-fateh-palette="green"] {
	--fateh-primary: #16a34a;
	--fateh-primary-hover: #15803d;
	--fateh-primary-soft: rgba(22, 163, 74, 0.16);
	--fateh-primary-tint: rgba(22, 163, 74, 0.10);
	--fateh-primary-text: #15803d;
}
html[data-fateh-palette="ocean"] {
	--fateh-primary: #2563eb;
	--fateh-primary-hover: #1d4ed8;
	--fateh-primary-soft: rgba(37, 99, 235, 0.16);
	--fateh-primary-tint: rgba(37, 99, 235, 0.10);
	--fateh-primary-text: #1d4ed8;
}
html[data-fateh-palette="rose"] {
	--fateh-primary: #e11d48;
	--fateh-primary-hover: #be123c;
	--fateh-primary-soft: rgba(225, 29, 72, 0.16);
	--fateh-primary-tint: rgba(225, 29, 72, 0.10);
	--fateh-primary-text: #be123c;
}
html[data-fateh-palette="slate"] {
	--fateh-primary: #334155;
	--fateh-primary-hover: #1e293b;
	--fateh-primary-soft: rgba(51, 65, 85, 0.16);
	--fateh-primary-tint: rgba(51, 65, 85, 0.10);
	--fateh-primary-text: #334155;
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
	--fateh-warn-bg: #7a4a03;
	--fateh-warn-fg: var(--text-on-yellow);
	--fateh-canvas: var(--bg-color);
	--fateh-input-bg: var(--control-bg);

	--fateh-chrome-bg: #0e0f15;
	--fateh-chrome-bg-2: #181a22;
	--fateh-chrome-bg-3: #242636;
	--fateh-chrome-line: rgba(255, 255, 255, 0.10);
	--fateh-chrome-fg: #eceef6;
	--fateh-chrome-fg-strong: #ffffff;
	--fateh-chrome-muted: #a3a9bd;

	--fateh-primary-text: #a5b4fc;
	--fateh-primary-soft: rgba(99, 102, 241, 0.30);
	--fateh-primary-tint: rgba(99, 102, 241, 0.18);

	--fateh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--fateh-shadow-md: 0 16px 30px -18px rgba(0, 0, 0, 0.8);
	--fateh-shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, 0.85);
	--fateh-scroll-shadow: rgba(0, 0, 0, 0.6);
	--fateh-scroll-edge: rgba(0, 0, 0, 0.6);
	--fateh-overlay: rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"][data-fateh-palette="green"] {
	--fateh-primary-text: #4ade80;
	--fateh-primary-soft: rgba(22, 163, 74, 0.30);
	--fateh-primary-tint: rgba(22, 163, 74, 0.18);
}
html[data-theme="dark"][data-fateh-palette="ocean"] {
	--fateh-primary-text: #93c5fd;
	--fateh-primary-soft: rgba(37, 99, 235, 0.32);
	--fateh-primary-tint: rgba(37, 99, 235, 0.20);
}
html[data-theme="dark"][data-fateh-palette="rose"] {
	--fateh-primary-text: #fda4af;
	--fateh-primary-soft: rgba(225, 29, 72, 0.30);
	--fateh-primary-tint: rgba(225, 29, 72, 0.18);
}
html[data-theme="dark"][data-fateh-palette="slate"] {
	--fateh-primary-text: #cbd5e1;
	--fateh-primary-soft: rgba(148, 163, 184, 0.30);
	--fateh-primary-tint: rgba(148, 163, 184, 0.18);
}

/* ── Light chrome (4a) ───────────────────────────────────────────────────────
 * White header + rail in LIGHT mode. Gated by html[data-fateh-chrome="light"], which is set ONLY from the server
 * payload (frappe.boot.fateh_nav.ui.chrome on the desk, www/fateh/index.py on /fateh); a legacy site, a user with no
 * menu and fateh_chrome=dark never get it and keep the dark chrome of :root. :not([data-theme="dark"]) keeps the
 * dark chrome in dark mode (the dark block above is untouched) and renders an unresolved data-theme="automatic" light,
 * like the Frappe content around it. Only chrome / nav tokens live here: canvas, surface and palette stay as they are.
 * Contrast (WCAG 2.x, gated by scripts/qa_static.py S-LIGHT-2): fg 10.43 / strong 18.43 / muted 6.13 on white; the
 * active row carries NEUTRAL text on the accent tint (green primary-text on its own tint is 4.4988:1 < 4.5), the
 * accent only on the icon (3:1) and the indicator bar. Hairlines (--fateh-chrome-line) are decorative; the search
 * field border is --fateh-chrome-input-line (3:1, WCAG 1.4.11). */
html[data-fateh-chrome="light"]:not([data-theme="dark"]) {
	--fateh-chrome-bg: #ffffff;
	--fateh-chrome-bg-2: #f6f7fb;
	--fateh-chrome-bg-3: #eceef7;
	--fateh-chrome-line: rgba(16, 24, 40, 0.10);
	--fateh-chrome-fg: #3a3f52;
	--fateh-chrome-fg-strong: #101323;
	--fateh-chrome-muted: #5b6178;

	--fateh-nav-active-bg: var(--fateh-primary-tint);
	--fateh-nav-active-fg: var(--fateh-chrome-fg-strong);
	--fateh-nav-active-icon: var(--fateh-primary-text);
	--fateh-nav-indicator: var(--fateh-primary);

	--fateh-chrome-input-bg: #f6f7fb;
	--fateh-chrome-input-line: #80869b;
}

/* ── RTL ────────────────────────────────────────────────────────────────── */
[dir="rtl"] {
	--fateh-dir: -1;
}

/* ── Frappe bridge ──────────────────────────────────────────────────────────
 * The desk-only primary-colour bridge (--primary / --btn-primary ...) lives in
 * fateh_erp_v2.css (app_include only): this file also ships to website pages
 * through web_include_css and must not recolour them. */

/* Frappe's sticky offsets (.page-head top, form-tab top) read --navbar-height
 * (48px). The native navbar is hidden under the shell and our fixed header is
 * --fateh-header-h tall, so make Frappe's own offsets follow it. */
body.enfono-shell {
	--navbar-height: var(--fateh-header-h);
}
/* launcher: full-viewport takeover, no native navbar at all */
body.enfono-fullscreen {
	--navbar-height: 0px;
}

/* ── Sidebar (4b-1, Synto shell) ─────────────────────────────────────────────
 * The header keeps the --fateh-chrome-* tokens (4a, untouched); the rail, its flyout panel, the drawer and the launcher's rail read --fateh-side-*.
 * The defaults ALIAS the chrome tokens, so legacy sites, fateh_chrome=dark and every current look are byte-identical until the user picks.
 * `auto` (data-fateh-sidebar absent) follows the mode: a light rail in light mode, a dark rail in dark mode.
 * Only the two MIXED combinations need values: a dark rail in light mode and a light rail in dark mode. They use the existing dark-chrome set /
 * the 4a light set as literals, and a NEUTRAL active row: the palette accent (primary-text) fails contrast there (light-mode primary-text on the dark
 * rail is 1.85-3.04:1, dark-mode primary-text on the white rail 1.48-1.99:1), so the active text, icon, dot and indicator are the strong colour.
 * Contrast is gated by scripts/qa_static.py S-SIDE-2 over every palette x mode x sidebar setting (text >= 4.5, non-text >= 3.0).
 * html[data-fateh-sidebar] is set only by fateh_shell.js / fateh_theme_boot.js and only while data-fateh-chrome="light" is on (the kill switch ignores it). */
:root {
	--fateh-side-bg: var(--fateh-chrome-bg);
	--fateh-side-bg-2: var(--fateh-chrome-bg-2);
	--fateh-side-bg-3: var(--fateh-chrome-bg-3);
	--fateh-side-line: var(--fateh-chrome-line);
	--fateh-side-fg: var(--fateh-chrome-fg);
	--fateh-side-fg-strong: var(--fateh-chrome-fg-strong);
	--fateh-side-muted: var(--fateh-chrome-muted);
	--fateh-side-label: var(--fateh-side-muted);
	--fateh-side-dot: var(--fateh-side-muted);
	--fateh-side-active-bg: var(--fateh-nav-active-bg);
	--fateh-side-active-fg: var(--fateh-nav-active-fg);
	--fateh-side-active-icon: var(--fateh-nav-active-icon);
	--fateh-side-active-indicator: var(--fateh-nav-indicator);
	/* the breadcrumb strip under the header (fateh_crumbs.js); body.fateh-has-crumbs raises --navbar-height by it */
	--fateh-crumb-h: 32px;
}
html[data-fateh-chrome="light"][data-fateh-sidebar="dark"]:not([data-theme="dark"]) {
	--fateh-side-bg: #0e0f15;
	--fateh-side-bg-2: #181a22;
	--fateh-side-bg-3: #242636;
	--fateh-side-line: rgba(255, 255, 255, 0.10);
	--fateh-side-fg: #eceef6;
	--fateh-side-fg-strong: #ffffff;
	--fateh-side-muted: #a3a9bd;
	--fateh-side-active-bg: var(--fateh-side-bg-3);
	--fateh-side-active-fg: var(--fateh-side-fg-strong);
	--fateh-side-active-icon: var(--fateh-side-fg-strong);
	--fateh-side-active-indicator: var(--fateh-side-fg-strong);
}
html[data-fateh-chrome="light"][data-fateh-sidebar="light"][data-theme="dark"] {
	--fateh-side-bg: #ffffff;
	--fateh-side-bg-2: #f6f7fb;
	--fateh-side-bg-3: #eceef7;
	--fateh-side-line: rgba(16, 24, 40, 0.10);
	--fateh-side-fg: #3a3f52;
	--fateh-side-fg-strong: #101323;
	--fateh-side-muted: #5b6178;
	--fateh-side-active-bg: var(--fateh-side-bg-3);
	--fateh-side-active-fg: var(--fateh-side-fg-strong);
	--fateh-side-active-icon: var(--fateh-side-fg-strong);
	--fateh-side-active-indicator: var(--fateh-side-fg-strong);
}