/* Design tokens — the UI source of truth in CSS form.
   Mirrors Product/Design system/colors.md (+ typography/radius/shadows). Use var(--token)
   in components; never hardcode hex or px sizes elsewhere.

   Colour tokens carry a distinct value per mode: light in :root, dark under
   [data-theme="dark"]. Token *names* are stable — components reference names, not hexes —
   so a single data-theme swap re-themes the whole app. */

:root {
  color-scheme: light;

  /* ---- Fonts (Egypt-first: full Arabic + Latin coverage) ---- */
  --font-display: "Cairo", system-ui, sans-serif;   /* h1–h4 only */
  --font-body: "Tajawal", system-ui, sans-serif;    /* everything else */

  /* ---- Spacing — 8pt rhythm ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius (radius.md) — 16px is the product default; sizes map so every primary
     component lands on 16 with no per-rule override. ---- */
  --radius-sm: 8px;    /* small controls, dropdown items */
  --radius-md: 16px;   /* base: buttons, inputs, alerts, small cards */
  --radius-lg: 16px;   /* base: cards, panels */
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ---- Type scale (subset in use) ---- */
  --text-sm: 0.875rem;         /* 14px */
  --text-md: 1rem;             /* 16px — body default, also stops iOS input zoom */
  --text-display-sm: 1.875rem; /* 30px */

  /* ---- Shadows (shadows.md) — darker set under dark mode below ---- */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.10), 0 2px 6px -3px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 12px 28px -6px rgb(15 23 42 / 0.14), 0 6px 12px -8px rgb(15 23 42 / 0.10);
  --shadow-xl: 0 24px 48px -12px rgb(15 23 42 / 0.22);

  /* ================= Firaq colour tokens — LIGHT ================= */

  /* Neutral (cool slate) */
  --neutral-primary: #FFFFFF;         /* the app/page surface */
  --neutral-primary-soft: #F8FAFC;    /* cards on the surface */
  --neutral-primary-medium: #F1F5F9;
  --neutral-secondary-medium: #FFFFFF; /* inputs — must contrast the card it sits on */
  --neutral-tertiary-medium: #CBD5E1;
  --neutral-tertiary: #CBD5E1;
  --quaternary-medium: #94A3B8;
  --gray: #64748B;

  /* Brand (teal) */
  --brand-softer: #F0FDFA;
  --brand-soft: #CCFBF1;
  --brand: #0F766E;
  --brand-medium: #115E59;
  --brand-strong: #134E4A;

  /* Status (saturated — must signal at a glance) */
  --success-soft: #DCFCE7;
  --success: #16A34A;
  --success-medium: #BBF7D0;
  --success-strong: #15803D;
  --danger-soft: #FEE2E2;
  --danger: #DC2626;
  --danger-medium: #FECACA;
  --danger-strong: #B91C1C;
  --warning-soft: #FEF3C7;
  --warning: #D97706;
  --warning-medium: #FDE68A;
  --warning-strong: #B45309;

  /* Button glint (inset top highlight + soft outer drop) */
  --color-1-400: rgba(255, 255, 255, 0.50);
  --color-1-700: rgba(15, 23, 42, 0.10);

  /* Utility */
  --dark: #0F172A;
  --dark-strong: #020617;
  --disabled: #F1F5F9;

  /* Text */
  --heading: #0F172A;
  --body: #334155;
  --body-subtle: #64748B;
  --text-on-primary: #FFFFFF;   /* on the brand fill — near-black in dark, see below */
  --fg-brand: #0F766E;
  --fg-brand-strong: #115E59;
  --fg-success: #15803D;
  --fg-success-strong: #166534;
  --fg-danger: #B91C1C;
  --fg-danger-strong: #991B1B;
  --fg-warning: #92400E;
  --fg-warning-subtle: #B45309;
  --fg-disabled: #94A3B8;

  /* Borders */
  --border-default: #E2E8F0;
  --border-default-medium: #CBD5E1;
  --border-default-strong: #94A3B8;
  --border-brand: #0F766E;
  --border-brand-subtle: #CCFBF1;
  --border-success: #16A34A;
  --border-success-subtle: #BBF7D0;
  --border-danger: #DC2626;
  --border-danger-subtle: #FECACA;
  --border-warning: #D97706;
  --border-warning-subtle: #FDE68A;

  /* Focus ring — every interactive element renders one */
  --focus-ring: rgba(15, 118, 110, 0.40);

  /* Accent (categorical/informational only — never body or nav; same both modes) */
  --accent-purple: #7C6BAE;
  --accent-sky: #2F6F9F;
  --accent-teal: #0F766E;
  --accent-pink: #C2548A;
  --accent-cyan: #0E7490;
  --accent-indigo: #4F46E5;
  --accent-orange: #D97706;

  /* ---- Semantic roles (what components actually reference) ---- */
  --color-bg: var(--neutral-primary);
  --color-surface: var(--neutral-primary-soft);
  --color-text: var(--body);
  --color-text-muted: var(--body-subtle);
  --color-border: var(--border-default);
  --color-brand: var(--brand);
  --color-brand-hover: var(--brand-strong);
  --color-brand-active: var(--brand-medium);

  /* ---- Legacy aliases — old --color-* names kept pointing at Firaq tokens so existing
     component CSS re-themes automatically (var() re-resolves per data-theme scope). New
     code should use the Firaq tokens above, not these. ---- */
  --color-white: #ffffff;
  --color-gray-50: var(--neutral-primary-soft);
  --color-gray-100: var(--neutral-primary-medium);
  --color-gray-300: var(--border-default-medium);
  --color-gray-400: var(--fg-disabled);
  --color-gray-500: var(--body-subtle);
  --color-gray-600: var(--body);
  --color-gray-700: var(--heading);
  --color-primary-25: var(--brand-softer);
  --color-primary-200: var(--border-brand-subtle);
  --color-primary-700: var(--brand);
  --color-error-50: var(--danger-soft);
  --color-error-600: var(--danger);
  --color-error-700: var(--danger-strong);
  --color-success-50: var(--success-soft);
  --color-success-600: var(--success);
  --color-warning-50: var(--warning-soft);
  --color-warning-600: var(--warning);
}

/* ================= Firaq colour tokens — DARK ================= */
[data-theme="dark"] {
  color-scheme: dark;

  --neutral-primary: #0B1220;
  --neutral-primary-soft: #111A2B;
  --neutral-primary-medium: #1A2433;
  --neutral-secondary-medium: #1A2433;
  --neutral-tertiary-medium: #324155;
  --neutral-tertiary: #2B3A4F;
  --quaternary-medium: #3C4A5E;
  --gray: #5A6B80;

  --brand-softer: #0E2B28;
  --brand-soft: #103833;
  --brand: #14B8A6;
  --brand-medium: #2DD4BF;
  --brand-strong: #5EEAD4;

  --success-soft: #052E1B;
  --success: #22C55E;
  --success-medium: #14532D;
  --success-strong: #4ADE80;
  --danger-soft: #2E1015;
  --danger: #F87171;
  --danger-medium: #7F1D1D;
  --danger-strong: #FCA5A5;
  --warning-soft: #2E2410;
  --warning: #F59E0B;
  --warning-medium: #78350F;
  --warning-strong: #FBBF24;

  --color-1-400: rgba(255, 255, 255, 0.12);
  --color-1-700: rgba(0, 0, 0, 0.25);

  --dark: #0B1220;
  --dark-strong: #020617;
  --disabled: #1E293B;

  --heading: #F1F5F9;
  --body: #E5E9F0;
  --body-subtle: #94A3B8;
  --text-on-primary: #0B1220;   /* near-black on the bright dark-mode brand (white fails) */
  --fg-brand: #5EEAD4;
  --fg-brand-strong: #99F6E4;
  --fg-success: #4ADE80;
  --fg-success-strong: #86EFAC;
  --fg-danger: #FCA5A5;
  --fg-danger-strong: #FECACA;
  --fg-warning: #FCD34D;
  --fg-warning-subtle: #FBBF24;
  --fg-disabled: #64748B;

  --border-default: #1F2A3C;
  --border-default-medium: #243042;
  --border-default-strong: #324155;
  --border-brand: #14B8A6;
  --border-brand-subtle: #103833;
  --border-success: #22C55E;
  --border-success-subtle: #14532D;
  --border-danger: #F87171;
  --border-danger-subtle: #7F1D1D;
  --border-warning: #F59E0B;
  --border-warning-subtle: #78350F;

  --focus-ring: rgba(45, 212, 191, 0.40);

  /* Shadows read stronger on a dark surface */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.50), 0 2px 6px -3px rgb(0 0 0 / 0.40);
  --shadow-lg: 0 12px 28px -6px rgb(0 0 0 / 0.60), 0 6px 12px -8px rgb(0 0 0 / 0.50);
  --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.70);
}