:root {
  /* Brand palette aligned with the live tajeir.ai visual identity on 2026-09-14.
   * Layout, components, and product flows remain original to this project;
   * shared color semantics live here so web/admin surfaces stay consistent.
   */
  --brand-navy: #1d4128;
  --brand-navy-deep: #205431;
  --brand-blue: #a97e2c;
  --brand-sky: #c7a667;
  --brand-pale: #f8edd8;

  --page: #fcf6e9;
  --bg-primary: #fcf6e9;
  --bg-secondary: #f8edd8;
  --surface: #fffdf9;
  --surface-hover: #f8f1de;
  --deep-green: var(--brand-navy);
  --bg-dark: var(--brand-navy);
  --bg-dark-card: var(--brand-navy-deep);
  --bg-dark-elevated: var(--brand-navy-deep);

  --text: #193521;
  --text-secondary: #645d4a;
  --text-tertiary: #645d4a;
  --text-on-dark: #fcfcfc;
  --text-on-dark-muted: #daccb1;
  --text-on-deep: var(--text-on-dark);

  --border: #dfd7c5;
  --border-light: #ece4d2;
  --border-dark: #4a6d51;
  --border-strong: #daccb1;

  --accent: var(--brand-blue);
  --accent-dark: var(--brand-blue);
  --accent-light: #c69e58;
  --accent-bg: var(--brand-pale);
  --accent-border: #daccb1;

  --success: #007956;
  --success-bg: #ecfdf5;
  --danger: #e40014;
  --danger-bg: #ffe4e6;

  /* Compatibility aliases used by existing prototype modules. */
  --brand: var(--accent);
  --brand-dark: var(--accent-dark);
  --brand-soft: var(--accent-bg);
  --text-muted: var(--text-tertiary);
  --surface-soft: var(--bg-secondary);
  --surface-deep: var(--bg-dark);

  --font-ar: "Almarai", "Noto Sans Arabic", Arial, sans-serif;
  --font-latin: Inter, "Segoe UI", Arial, sans-serif;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px #0000000a;
  --shadow-sm: 0 2px 8px #0000000d;
  --shadow-md: 0 4px 20px #00000012;
  --shadow-lg: 0 12px 40px #00000017;
  --shadow-xl: 0 20px 60px #0000001f;
  --shadow-alert: 0 8px 32px #0000001f, 0 1px 3px #0000000f;
  --shadow-card: var(--shadow-md);
  --shadow-soft: var(--shadow-lg);

  --container: min(1200px, calc(100vw - 48px));
  --container-wide: min(1280px, calc(100vw - 32px));
  --section-py: clamp(80px, 10vw, 130px);
  --section: var(--section-py);
  --header-height: 72px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --motion-fast: 160ms;
  --motion-ui: 250ms;
  --motion-reveal: 360ms;
}