/* AYMEN CPM design tokens: the single source of colour, type, spacing, radius and shadow.
   Every other stylesheet refers to these custom properties; tests/design-tokens.cjs fails on literal values elsewhere.
   See docs/ui-redesign/DESIGN-SYSTEM.md. Light is the default; dark comes from the OS setting or [data-theme="dark"]. */
:root{
 color-scheme:light;
 /* Neutral ramp (slate, cool to match the navy brand) */
 --gray-0:#ffffff;--gray-25:#f6f8fb;--gray-50:#eef2f8;--gray-100:#e3e8ef;--gray-200:#d5dde8;--gray-300:#b8c4d3;
 --gray-400:#94a3b8;--gray-500:#5b6b82;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;
 /* Brand accent: AYMEN navy (#12395f is the logo and primary-button colour) */
 --brand-50:#eef4fb;--brand-100:#d6e3f1;--brand-300:#8fb0d3;--brand-500:#2a6cb8;--brand-700:#12395f;--brand-900:#0b2a4a;
 /* Status: fixed meanings site-wide. fg = text and solid marks, bg = tint, line = border */
 --status-positive:#0f7a57;--status-positive-bg:#e7f5ee;--status-positive-line:#b5dcc6;
 --status-warning:#9c4a08;--status-warning-bg:#fff4e0;--status-warning-line:#f5c56b;--status-warning-solid:#f59e0b;
 --status-negative:#b42318;--status-negative-bg:#fdecea;--status-negative-line:#f5c2bd;
 --status-info:#1d4ed8;--status-info-bg:#e8f0fc;--status-info-line:#bcd3f2;--status-info-solid:var(--brand-500);
 --status-draft:var(--gray-500);--status-draft-bg:var(--gray-50);--status-draft-line:var(--gray-200);
 /* Chart series: six validated categorical slots (CVD-safe in this order). Same series name = same slot everywhere. */
 --series-1:var(--brand-500);--series-2:#d9712a;--series-3:#14937a;--series-4:#6a52d6;--series-5:#c94f8a;--series-6:#a77b00;

 /* Semantic roles (new components use these, never the ramps directly) */
 --canvas:var(--gray-25);--surface:var(--gray-0);--surface-sunken:var(--gray-50);--surface-hover:var(--gray-50);
 --text:var(--gray-900);--text-secondary:var(--gray-600);--text-muted:var(--gray-500);--text-on-accent:var(--gray-0);
 --border:var(--gray-200);--divider:var(--gray-100);
 --accent:var(--brand-700);--accent-hover:var(--brand-900);--accent-soft:var(--brand-50);--accent-line:var(--brand-100);
 --focus-ring:var(--brand-500);
 --money-positive:var(--status-positive);--money-negative:var(--status-negative);--money-due:var(--status-warning);
 --chart-grid:var(--gray-100);--chart-axis:var(--gray-500);--chart-track:var(--gray-50);
 --scrim:color-mix(in srgb,var(--gray-900) 45%,transparent);

 /* Type: one family, tabular figures for amounts. 12/13/14/16/20/24/32; the two display sizes scale with clamp(). */
 --font-sans:Inter,"Noto Sans Tamil","Latha","Nirmala UI",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
 --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
 --fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-16:16px;--fs-20:20px;
 /* Display sizes step down one scale size on phones (≤760px, the single phone breakpoint) without leaving the scale:
    the vw term is either far below the minimum or far above the maximum, so clamp() returns exactly 20/24 or 24/32. */
 --fs-24:clamp(20px,calc((100vw - 761px) * 1000),24px);--fs-32:clamp(24px,calc((100vw - 761px) * 1000),32px);
 --lh-text:1.4;--lh-figure:1.2;
 --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;

 /* Spacing: 4px base, only these steps */
 --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;

 /* Shape and depth: radius 8 for cards, 6 for inputs; one shadow level; one border colour */
 --radius-sm:4px;--radius-input:6px;--radius-card:8px;--radius-pill:999px;
 --shadow:0 1px 2px color-mix(in srgb,var(--gray-900) 6%,transparent),0 4px 12px color-mix(in srgb,var(--gray-900) 6%,transparent);
 --border-width:1px;

 /* Layout */
 --row-h:40px;--tap:44px;--content-max:1800px;--chart-sm:240px;--chart-md:320px;--chart-lg:400px;
 --ease:cubic-bezier(.2,.7,.2,1);
}
/* Dark theme: each ramp is mirrored so every light-on-dark pair keeps its contrast. */
@media (prefers-color-scheme:dark){
 :root:where(:not([data-theme="light"])){
  color-scheme:dark;
  --gray-0:#151c26;--gray-25:#0f141b;--gray-50:#1b2430;--gray-100:#222c39;--gray-200:#2c3846;--gray-300:#3b4858;
  --gray-400:#5b6878;--gray-500:#8a96a6;--gray-600:#a8b3c1;--gray-700:#c4cdd8;--gray-800:#dde3ea;--gray-900:#eef2f6;
  --brand-50:#15243a;--brand-100:#1c3150;--brand-300:#2f5585;--brand-500:#4d8ad6;--brand-700:#9cc0ea;--brand-900:#cfe0f5;
  --status-positive:#5fd39f;--status-positive-bg:#12291f;--status-positive-line:#1f5a40;
  --status-warning:#f0b95a;--status-warning-bg:#2e2210;--status-warning-line:#6b4c12;--status-warning-solid:#e0a030;
  --status-negative:#ff8a80;--status-negative-bg:#33171a;--status-negative-line:#7a2a2a;
  --status-info:#8ab4f0;--status-info-bg:#142540;--status-info-line:#24467a;
  --series-2:#d0742f;--series-3:#21a083;--series-4:#8a78e6;--series-5:#d0588f;--series-6:#b58c10;
  --scrim:color-mix(in srgb,#000 60%,transparent);
 }
}
:root[data-theme="dark"]{
 color-scheme:dark;
 --gray-0:#151c26;--gray-25:#0f141b;--gray-50:#1b2430;--gray-100:#222c39;--gray-200:#2c3846;--gray-300:#3b4858;
 --gray-400:#5b6878;--gray-500:#8a96a6;--gray-600:#a8b3c1;--gray-700:#c4cdd8;--gray-800:#dde3ea;--gray-900:#eef2f6;
 --brand-50:#15243a;--brand-100:#1c3150;--brand-300:#2f5585;--brand-500:#4d8ad6;--brand-700:#9cc0ea;--brand-900:#cfe0f5;
 --status-positive:#5fd39f;--status-positive-bg:#12291f;--status-positive-line:#1f5a40;
 --status-warning:#f0b95a;--status-warning-bg:#2e2210;--status-warning-line:#6b4c12;--status-warning-solid:#e0a030;
 --status-negative:#ff8a80;--status-negative-bg:#33171a;--status-negative-line:#7a2a2a;
 --status-info:#8ab4f0;--status-info-bg:#142540;--status-info-line:#24467a;
 --series-2:#d0742f;--series-3:#21a083;--series-4:#8a78e6;--series-5:#d0588f;--series-6:#b58c10;
 --scrim:color-mix(in srgb,#000 60%,transparent);
}
@media (prefers-reduced-motion:reduce){:root{--ease:linear}}