/* Manara One Design System 2.0 — "Corporate Navy & Soft Gradient" (owner brief 2026-10-11).
   The one source of truth for colour, gradient, type, space, radius, elevation and motion. Every Manara app reads these
   --m1-* tokens; none declares its own palette. Loaded on the desk (app_include_css) before manara_theme.css and
   manara_ds.css; nothing here styles an element, so on its own it changes nothing on screen.
   Contrast (WCAG 2.2 AA) is checked by tests_bench_free/test_design_system.py: change a value here and run it. */

:root {
	/* ------------------------------------------------------------ corporate primary */
	--m1-navy-deep: #0B1B33;          /* sidebar ground, darkest brand surface */
	--m1-navy: #10233F;               /* corporate navy: headings on brand surfaces, gradient start */
	--m1-navy-surface: #172F50;       /* raised surface on navy (active nav, company switch) */
	--m1-blue-exec: #315A91;          /* executive blue: gradient end, focus border */
	--m1-blue: #3668A3;               /* interactive blue: links, info, selected states */
	--m1-steel: #8298B4;              /* steel blue: secondary text on navy, chart secondary */
	--m1-blue-soft: #E5EDF9;          /* soft blue: selected rows, hover tints */
	--m1-gold: #BC9856;               /* muted gold: brand detail on navy only (2.7:1 on white - never text on white) */

	/* ------------------------------------------------------------ neutrals */
	--m1-bg: #F4F6F9;                 /* application background */
	--m1-surface: #FFFFFF;            /* cards, forms, tables */
	--m1-surface-2: #F8F9FB;          /* secondary surface: table heads, read-only fields, rails */
	--m1-input-bg: #FFFFFF;
	--m1-border: #E2E7EF;
	--m1-border-strong: #CDD6E2;      /* input borders, dividers that must read */
	--m1-text: #17243A;               /* primary text, 15.6:1 on white */
	--m1-text-2: #627188;             /* secondary text, 4.96:1 on white, 4.58:1 on --m1-bg */
	--m1-text-2-tint: #55647B;        /* secondary text on the soft card tints (keeps AA on every tint) */
	--m1-text-3: #8491A3;             /* muted: placeholders, disabled, decorative meta only (3.2:1 - not body text) */
	--m1-on-navy: #FFFFFF;
	--m1-on-navy-2: #C8D3E3;          /* body text on navy */
	--m1-on-navy-3: #8298B4;          /* labels on navy */

	/* ------------------------------------------------------------ soft card families (surface / border / icon ink) */
	--m1-tint-finance: #EAF1FA;   --m1-tint-finance-line: #D4E1F0;   --m1-tint-finance-ink: #2A5585;   /* financial, sales */
	--m1-tint-commerce: #FAF3E7;  --m1-tint-commerce-line: #EBDDC5;  --m1-tint-commerce-ink: #7A5A1E;  /* receivables, commercial */
	--m1-tint-ops: #EAF5F1;       --m1-tint-ops-line: #D2E9DF;       --m1-tint-ops-ink: #1B6B53;       /* cash, operations */
	--m1-tint-people: #F0EFF7;    --m1-tint-people-line: #E1DFED;    --m1-tint-people-ink: #4F4A7A;    /* HR, people */
	--m1-tint-alert: #FFF5E8;     --m1-tint-alert-line: #F0E1C9;     --m1-tint-alert-ink: #8A5A12;     /* alerts, approvals */

	/* ------------------------------------------------------------ semantic (base = icons, bars, borders; -fg = text) */
	--m1-success: #238467;  --m1-success-fg: #1B6B53;  --m1-success-bg: #EAF5F1;  --m1-success-line: #BFE0D3;
	--m1-warning: #B78029;  --m1-warning-fg: #8A5A12;  --m1-warning-bg: #FFF5E8;  --m1-warning-line: #F0E1C9;
	--m1-danger: #C34D50;   --m1-danger-fg: #A33A3D;   --m1-danger-bg: #FCEEEE;   --m1-danger-line: #F1CFD0;
	--m1-info: #3668A3;     --m1-info-fg: #2A5585;     --m1-info-bg: #EAF1FA;     --m1-info-line: #D4E1F0;
	--m1-neutral: #627188;  --m1-neutral-fg: #4A586D;  --m1-neutral-bg: #EEF1F5;  --m1-neutral-line: #DCE2EA;

	/* ------------------------------------------------------------ chart series, in order (muted blue and slate; every one 3:1 or
	   more on white). manara_cards.js gives them to every chart that names no colours of its own: keep the two lists equal */
	--m1-chart-1: #315A91; --m1-chart-2: #6F819C; --m1-chart-3: #10233F; --m1-chart-4: #3668A3;
	--m1-chart-5: #238467; --m1-chart-6: #B78029; --m1-chart-7: #8491A3; --m1-chart-8: #C34D50;

	/* ------------------------------------------------------------ gradients (each has one job; never inside inputs or dense tables) */
	--m1-grad-nav: linear-gradient(160deg, #0B1B33 0%, #152E50 100%);                      /* sidebar, selected nav */
	--m1-grad-exec: linear-gradient(115deg, #10233F 0%, #315A91 100%);                     /* document summaries, executive panels */
	--m1-grad-steel: linear-gradient(120deg, #27466B 0%, #47729B 65%, #8298B4 100%);       /* informational headers */
	--m1-grad-mist: linear-gradient(135deg, #FFFFFF 0%, #F0F4F9 100%);                     /* form section heads, neutral panels */
	--m1-grad-finance: linear-gradient(135deg, #E5EDF9 0%, #F8FAFE 100%);
	--m1-grad-commerce: linear-gradient(135deg, #F9F0DF 0%, #FFFCF6 100%);
	--m1-grad-ops: linear-gradient(135deg, #E5F3EF 0%, #FAFDFC 100%);
	--m1-grad-people: linear-gradient(135deg, #ECEAF5 0%, #FCFBFE 100%);
	--m1-grad-primary: linear-gradient(110deg, #10233F 0%, #315A91 100%);                  /* primary buttons */

	/* ------------------------------------------------------------ type */
	--m1-font-sans: "Inter", "IBM Plex Sans Arabic", "Segoe UI", -apple-system, system-ui, sans-serif;
	--m1-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
	--m1-fs-xs: 11.5px;   /* overlines, table heads (uppercase) */
	--m1-fs-sm: 12.5px;   /* labels, help, meta */
	--m1-fs-md: 13.5px;   /* body, inputs, table cells */
	--m1-fs-lg: 15px;     /* card titles, section heads */
	--m1-fs-xl: 18px;     /* panel titles */
	--m1-fs-2xl: 24px;    /* page titles */
	--m1-fs-kpi: 26px;    /* KPI figures */
	--m1-fw-regular: 400; --m1-fw-medium: 500; --m1-fw-semibold: 600; --m1-fw-bold: 650;
	--m1-lh-tight: 1.25;  --m1-lh: 1.5;
	--m1-track-tight: -0.012em; --m1-track-caps: .06em;

	/* ------------------------------------------------------------ space (4px grid) */
	--m1-sp-1: 4px; --m1-sp-2: 8px; --m1-sp-3: 12px; --m1-sp-4: 16px; --m1-sp-5: 20px; --m1-sp-6: 24px; --m1-sp-8: 32px; --m1-sp-10: 40px;
	--m1-gutter: 32px;            /* page side padding on desktop; 16px under 992px */

	/* ------------------------------------------------------------ radius */
	--m1-r-kpi: 16px; --m1-r-tile: 16px; --m1-r-panel: 16px; --m1-r-ai: 16px;
	--m1-r-card: 14px; --m1-r-section: 14px;
	--m1-r-dialog: 18px;
	--m1-r-btn: 10px; --m1-r-input: 9px; --m1-r-badge: 7px;

	/* ------------------------------------------------------------ elevation */
	--m1-shadow-card: 0 4px 18px rgba(16, 35, 63, .05);
	--m1-shadow-raised: 0 10px 28px rgba(16, 35, 63, .09);
	--m1-shadow-hairline: 0 1px 2px rgba(16, 35, 63, .06);
	--m1-shadow-btn: 0 1px 2px rgba(16, 35, 63, .12), 0 4px 12px -6px rgba(16, 35, 63, .45);

	/* ------------------------------------------------------------ focus */
	--m1-focus-border: #315A91;
	--m1-focus-ring: 0 0 0 3px rgba(54, 104, 163, .28);

	/* ------------------------------------------------------------ controls and density */
	--m1-control-h: 38px;         /* inputs; 32px in compact density */
	--m1-btn-h: 38px;
	--m1-row-h: 48px;             /* list rows; 38px in compact density */

	/* ------------------------------------------------------------ motion */
	--m1-dur-fast: 120ms; --m1-dur: 160ms; --m1-dur-slow: 200ms;
	--m1-ease: cubic-bezier(.2, .7, .2, 1);
}

/* compact density for experienced operators (body.m1-compact) */
body.m1-compact { --m1-control-h: 32px; --m1-btn-h: 32px; --m1-row-h: 38px; --m1-fs-md: 13px; }

@media (max-width: 991px) { :root { --m1-gutter: 16px; } }
@media (prefers-reduced-motion: reduce) { :root { --m1-dur-fast: 0ms; --m1-dur: 0ms; --m1-dur-slow: 0ms; } }