:root {
  /* Measured against the live Taquad public UI on 2026-09-07.
   * The implementation is original; these tokens reproduce the reference visual system
   * without importing Taquad source code or brand assets.
   */
  --page: #f8fafc;
  --bg-primary: #faf9f7;
  --bg-secondary: #f3f1ed;
  --surface: #ffffff;
  --surface-hover: #fefefe;
  --deep-green: #08338f;
  --bg-dark: var(--deep-green);
  --bg-dark-card: var(--deep-green);
  --bg-dark-elevated: var(--deep-green);

  --text: var(--deep-green);
  --text-secondary: #555555;
  --text-tertiary: #888888;
  --text-on-dark: #f5f5f3;
  --text-on-dark-muted: #c7d0c9;

  --border: #e8e6e1;
  --border-light: #f0eeea;
  --border-dark: #64748b;

  --accent: #62beff;
  --accent-dark: #0b62bd;
  --accent-light: #62beff;
  --accent-bg: #fdf6ec;
  --accent-border: #bfd0e4;

  --success: #0b62bd;
  --success-bg: #eef8f6;
  --danger: #c0506e;
  --danger-bg: #fce8ee;

  /* Compatibility aliases for prototype modules that predate the measured system. */
  --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;
}