/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   Every colour, space, radius and duration in the application resolves to a
   variable declared here. No component hard-codes a hex value, so retheming
   is a change in one file (spec §3.2).

   Dark is the primary theme. Light is a complete peer, not an afterthought.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --brand-500: #3b6ef5;
  --brand-400: #5b86f7;
  --brand-600: #2b54cc;
  --brand-700: #1e3d99;

  --accent-500: #17c3d9;
  --accent-400: #38d4e6;

  /* ---- Semantic --------------------------------------------------------- */
  --success-500: #10b981;
  --success-400: #34d399;
  --warning-500: #f59e0b;
  --warning-400: #fbbf24;
  --danger-500: #ef4444;
  --danger-400: #f87171;
  --info-500: #3b82f6;

  /* ---- Spacing ---------------------------------------------------------- */
  /* A 4px base keeps every gap on a shared rhythm (spec §3.4). */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Radius (spec §3.5) ------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---- Typography ------------------------------------------------------- */
  /* Two families only (spec §3.3). The Arabic face leads because Arabic is
     the primary language; Latin text falls through to Inter. */
  --font-ar: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-en: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Arabic script needs more vertical room than Latin to stay legible. */
  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.85;

  /* ---- Layout ----------------------------------------------------------- */
  --sidebar-width: 264px;
  --sidebar-collapsed: 76px;
  --header-height: 68px;
  --content-max: 1400px;

  /* ---- Motion (spec §19) ------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ==========================================================================
   Dark theme — the default
   ========================================================================== */

:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bg-base: #060b17;
  --bg-subtle: #081020;
  --surface: #0a1224;
  --surface-raised: #0f1a33;
  --surface-overlay: #121e3a;
  --surface-hover: #101c36;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --border-focus: #38bdf8;

  --text-primary: #ffffff;
  --text-secondary: #8e9cb4;
  --text-muted: #64748b;
  --text-inverse: #060b17;

  --primary: #0284c7;
  --primary-hover: #38bdf8;
  --primary-text: #ffffff;
  /* Tinted fills for badges and soft buttons. */
  --primary-soft: rgba(2, 132, 199, 0.16);
  --success-soft: rgba(16, 185, 129, 0.14);
  --warning-soft: rgba(245, 158, 11, 0.14);
  --danger-soft: rgba(239, 68, 68, 0.14);
  --info-soft: rgba(56, 189, 248, 0.14);

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55);

  /* Used sparingly — hero and premium surfaces only (spec §3.2). */
  --gradient-hero: linear-gradient(135deg, #091328 0%, #0d1a37 55%, #071022 100%);
  --gradient-brand: linear-gradient(135deg, #0284c7, #2563eb);

  --glass-bg: rgba(8, 16, 32, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);

  --skeleton-base: #0f1a33;
  --skeleton-shine: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   Light theme
   ========================================================================== */

:root[data-theme='light'],
:root[data-effective-theme='light'],
[data-theme='light'],
[data-effective-theme='light'],
html[data-effective-theme='light'],
html[data-theme='light'] {
  color-scheme: light;

  --bg-base: #f1f5f9;
  --bg-subtle: #e2e8f0;
  --surface: #ffffff;
  --surface-raised: #f8fafc;
  --surface-overlay: #ffffff;
  --surface-hover: #f1f5f9;

  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.18);
  --border-focus: #0284c7;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  --primary: #0284c7;
  --primary-hover: #0369a1;
  --primary-text: #ffffff;
  --primary-soft: rgba(2, 132, 199, 0.1);
  --success-soft: rgba(16, 185, 129, 0.1);
  --warning-soft: rgba(245, 158, 11, 0.1);
  --danger-soft: rgba(239, 68, 68, 0.1);
  --info-soft: rgba(2, 132, 199, 0.1);

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #0284c7;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.12);

  --gradient-hero: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 55%, #f8fafc 100%);
  --gradient-brand: linear-gradient(135deg, #0284c7, #2563eb);

  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(0, 0, 0, 0.08);

  --skeleton-base: #e2e8f0;
  --skeleton-shine: rgba(255, 255, 255, 0.6);
}