:root {
  /* ---- Brand scale (theme-color / primary blue + teal) ---- */
  --primary-900: #013056;
  --primary-800: #02569a;
  --primary-700: #0470c2;
  --primary-600: #1e86d6;
  --primary-500: #3d9ce0;
  --accent-600: #1a8f9e;
  --accent-500: #2ba6b8;
  --accent-400: #4bb8c6;

  /* ---- Semantic color ---- */
  --color-primary: var(--primary-800);
  --color-primary-hover: var(--primary-900);
  --color-primary-deep: var(--primary-900);
  --color-primary-soft: #e8f1f8;
  --color-secondary: var(--accent-500);
  --color-accent: var(--accent-500);
  --color-accent-hover: var(--accent-600);
  --color-accent-soft: #e6f6f8;
  --color-brand-dark: var(--primary-900);
  --color-heading: var(--primary-900);
  --color-navy: var(--color-brand-dark);
  --color-background: #f4f7fb;
  --color-bg: var(--color-background);
  --color-surface: #ffffff;
  --color-surface-muted: #eef3f8;
  --color-surface-2: var(--color-surface-muted);
  --color-text-primary: #0c2238;
  --color-text: var(--color-text-primary);
  --color-text-secondary: #5b6b7c;
  --color-muted: var(--color-text-secondary);
  --color-text-muted: #8a97a8;
  --color-border: #e2e8f0;
  --color-inverse: #ffffff;
  --color-on-primary: #ffffff;
  --color-success: #1b7f4e;
  --color-warning: #b7791f;
  --color-error: #b42318;
  --color-overlay: rgb(1 48 86 / 0.48);
  --color-browser-chrome: #f4f7fa;
  --color-unified-start: #f7fbfc;
  --color-unified-end: #e4eef1;

  /* ERP operational statuses */
  --status-draft: #5b6b7c;
  --status-draft-bg: #eef1f4;
  --status-posted: #1b7f4e;
  --status-posted-bg: #e6f6ee;
  --status-delayed: #b42318;
  --status-delayed-bg: #fdecea;
  --status-ontime: #02569a;
  --status-ontime-bg: #e8f1f8;
  --status-stalled: #9a6700;
  --status-stalled-bg: #f8f1e0;

  /* Quiet construction leftovers — remapped to brand, not orange */
  --blueprint-paper: var(--color-background);
  --blueprint-ink: var(--primary-900);
  --blueprint-line: rgb(2 86 154 / 0.07);
  --blueprint-line-strong: rgb(4 112 194 / 0.18);
  --safety-orange: var(--accent-500);
  --safety-orange-soft: var(--color-accent-soft);
  --caution-yellow: #c9a227;
  --stamp-gold: var(--accent-600);

  /* ---- Typography ---- */
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-latin: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sans: var(--font-latin);
  --font-display: var(--font-sans);

  --fs-caption: 0.8125rem;   /* 13 */
  --fs-xs: var(--fs-caption);
  --fs-sm: 0.9375rem;        /* 15 — nav, labels, small */
  --fs-md: 1.125rem;         /* 18 — body */
  --fs-lg: 1.25rem;          /* 20 */
  --fs-xl: 1.75rem;          /* 28 */
  --fs-2xl: clamp(1.75rem, 2.6vw + 1rem, 2.5rem);   /* section ~28–40 */
  --fs-3xl: clamp(2.125rem, 3.2vw + 1rem, 3.5rem);  /* h1 ~34–56 */
  --fs-display: clamp(2.125rem, 4.2vw + 0.6rem, 3.75rem); /* hero ~34–60 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-heading: 1.28;
  --lh-body: 1.75;

  /* ---- Spacing (4/8) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgb(1 48 86 / 0.05);
  --shadow-md: 0 8px 24px rgb(1 48 86 / 0.08);
  --shadow-lg: 0 18px 40px rgb(1 48 86 / 0.10);
  --shadow-product: 0 20px 48px rgb(2 86 154 / 0.14);

  --container: 76rem;
  --container-wide: 82rem;
  --header-h: 4.25rem;
  --focus: 0 0 0 3px rgb(2 86 154 / 0.28);
  --ease: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-draw: 900ms cubic-bezier(0.65, 0, 0.35, 1);
  --motion-brick: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --motion-beam: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-s: env(safe-area-inset-left, 0px);
  --safe-e: env(safe-area-inset-right, 0px);
}

@media (max-width: 899px) {
  :root {
    --header-h: 3.75rem;
    --space-7: 2.5rem;
    --space-8: 3.5rem;
    --fs-md: 1rem;
  }
}

html[lang="ar"] {
  --font-sans: var(--font-arabic);
  --font-display: var(--font-arabic);
  --lh-tight: 1.32;
  --lh-heading: 1.38;
  --lh-body: 1.85;
}

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  --color-primary: var(--primary-500);
  --color-primary-hover: var(--primary-600);
  --color-primary-deep: #c5d9ea;
  --color-primary-soft: #1a3d5c;
  --color-secondary: var(--accent-400);
  --color-accent: var(--accent-400);
  --color-accent-hover: var(--accent-500);
  --color-accent-soft: #123840;
  --color-brand-dark: #071828;
  --color-navy: var(--color-brand-dark);
  --color-background: #0a1628;
  --color-bg: var(--color-background);
  --color-surface: #132a42;
  --color-surface-muted: #1a3550;
  --color-surface-2: var(--color-surface-muted);
  --color-text-primary: #eef3f8;
  --color-text: var(--color-text-primary);
  --color-heading: var(--color-text-primary);
  --color-text-secondary: #a8bdd0;
  --color-muted: var(--color-text-secondary);
  --color-text-muted: #7a93a8;
  --color-border: #2a4560;
  --color-inverse: #0a1628;
  --color-overlay: rgb(0 0 0 / 0.58);
  --color-browser-chrome: #162636;
  --color-unified-start: #142638;
  --color-unified-end: #0d1e30;
  --color-success: #45c47a;
  --color-warning: #e0ad3a;
  --color-error: #ef6b62;

  --status-draft: #a8bdd0;
  --status-draft-bg: #1a2836;
  --status-posted: #45c47a;
  --status-posted-bg: #0d3320;
  --status-delayed: #ef6b62;
  --status-delayed-bg: #3a1512;
  --status-ontime: var(--primary-500);
  --status-ontime-bg: #0d2d4a;
  --status-stalled: #e0ad3a;
  --status-stalled-bg: #3a2e0d;

  --blueprint-paper: var(--color-background);
  --blueprint-ink: var(--color-text-primary);
  --blueprint-line: rgb(61 156 224 / 0.1);
  --blueprint-line-strong: rgb(61 156 224 / 0.24);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.38);
  --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.48);
  --shadow-product: 0 20px 48px rgb(0 0 0 / 0.52);
  --focus: 0 0 0 3px rgb(61 156 224 / 0.42);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease: 0ms;
    --ease-out: 0ms;
    --ease-spring: 0ms;
    --motion-draw: 0ms;
    --motion-brick: 0ms;
    --motion-beam: 0ms;
  }
}