/* ============================================================
   edariba Design System — Colors & Typography Tokens
   OKLch-first palette, Arabic-first typography.
   Import this as the first stylesheet in any edariba artifact.
   ============================================================ */

/* ---- Fonts -------------------------------------------------- */
/* Self-hosted: @font-face declarations live in assets/css/fonts.css (enqueued
   before this file by inc/enqueue.php). No Google Fonts round trip. */

/* ---- Root tokens -------------------------------------------- */
/* Palette: payable-inspired — dark teal (#0C4242) brand + gold (#C9A84A)
   accent + cyan (#61FFED) neon glow on a neutral #F7F7F7 canvas. */
:root {
  /* Light theme (default) */
  --bg: #F7F7F7;
  --surface: oklch(100% 0 0);
  --fg: oklch(18% 0.02 160);
  --muted: oklch(48% 0.035 160);
  --border: oklch(88% 0.02 160);
  --accent: #C9A84A;

  /* Dark theme (AI panels + brand sections) */
  --bg-dark: #0C4242;
  --surface-dark: #155555;
  --fg-dark: oklch(97% 0.01 160);
  --muted-dark: oklch(65% 0.04 160);
  --border-dark: oklch(40% 0.05 182);
  --accent-dark: #D8BE72;

  /* Supporting palette */
  --teal: #0C4242;
  --teal-deep: #062626;
  --teal-muted: oklch(85% 0.03 160);
  --lime-glow: #61FFED;
  --success: oklch(65% 0.18 145);
  --warning: oklch(75% 0.14 85);
  --danger: oklch(55% 0.18 25);

  /* Tile palette — used by blog cards and article hero media placeholders.
     8 pairs keyed by category; pick a pair via .tile-* utility classes. */
  --tile-teal-bg: #DCEAE6;  --tile-teal-fg: #0C4242;
  --tile-navy-bg: #DDE3EE;  --tile-navy-fg: #223A5E;
  --tile-gold-bg: #F5EAD2;  --tile-gold-fg: #8A6A1E;
  --tile-clay-bg: #F3E1D6;  --tile-clay-fg: #8A4B2E;
  --tile-moss-bg: #E4EAD7;  --tile-moss-fg: #4B5E32;
  --tile-sand-bg: #F1ECE2;  --tile-sand-fg: #6B5D46;
  --tile-plum-bg: #EAE1EE;  --tile-plum-fg: #5B3A6B;
  --tile-slate-bg: #E3E7EA;  --tile-slate-fg: #39434B;

  /* Legacy per-page tokens still referenced by assets/css/lp.css markup
     (accountants*.html, third-e-commerce*.html) — kept so those pages
     render as originally designed rather than falling back to unset. */
  --root-dark: #0C4242;
  --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Doctors landing page — dark "AI panel" section tokens */
  --d-teal: #0c4242;
  --d-teal-deep: #0c4242;
  --d-cyan: #c3e9a0;
  --d-cyan-soft: #f1f8f9;
  --d-glow-cyan: #61ffed; /* true cyan — reserved for AI-detected/verified moments only */
  --font-display-new: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;

  /* Typography */
  --font-display: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  --font-body: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --text-display-xl: 64px;
  --text-display: 48px;
  --text-headline: 32px;
  --text-title: 24px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-label: 14px;
  --text-caption: 12px;
  --text-mono-lg: 20px;
  --text-mono: 14px;

  --leading-tight: 1.1;
  --leading-snug: 1.15;
  --leading-normal: 1.3;
  --leading-relaxed: 1.6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 40px;
  --radius-3xl: 48px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.06);
  --shadow-lg: 0 12px 32px oklch(0% 0 0 / 0.10);
  --shadow-glow: 0 0 24px oklch(78% 0.11 90 / 0.30);

  /* Motion */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Hex fallbacks for environments without OKLch support */
  --accent-hex: #C9A84A;
  --teal-hex: #0C4242;
  --teal-deep-hex: #062626;
  --teal-muted-hex: #D4E8D8;
  --lime-glow-hex: #61FFED;
  --success-hex: #4CAF50;
  --warning-hex: #FFC107;
  --danger-hex: #D32F2F;
  --bg-hex: #F7F7F7;
  --surface-hex: #FFFFFF;
  --fg-hex: #071A15;
  --muted-hex: #4A5C54;
  --border-hex: #E2E2DE;
  --bg-dark-hex: #0C4242;
  --surface-dark-hex: #155555;
  --fg-dark-hex: #F0F5F2;
  --muted-dark-hex: #7A9A8E;
  --border-dark-hex: #2A5A5A;
  --accent-dark-hex: #D8BE72;
}

/* ---- Base reset --------------------------------------------- */
*, *::before, *::after {

}

html {
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--fg);
  background: var(--bg);
}

/* ---- Utility classes ---------------------------------------- */
.font-display { font-family: var(--font-display); }
.font-body   { font-family: var(--font-body); }
.font-mono   { font-family: var(--font-mono); }

.text-display-xl { font-size: var(--text-display-xl); line-height: var(--leading-tight); font-weight: 700; }
.text-display    { font-size: var(--text-display);    line-height: var(--leading-snug); font-weight: 700; }
.text-headline   { font-size: var(--text-headline);   line-height: var(--leading-normal); font-weight: 700; }
.text-title      { font-size: var(--text-title);      line-height: var(--leading-normal); font-weight: 600; }
.text-body-lg    { font-size: var(--text-body-lg);    line-height: var(--leading-relaxed); font-weight: 400; }
.text-body       { font-size: var(--text-body);       line-height: var(--leading-relaxed); font-weight: 400; }
.text-label      { font-size: var(--text-label);      line-height: var(--leading-normal); font-weight: 500; }
.text-caption    { font-size: var(--text-caption);    line-height: var(--leading-normal); font-weight: 500; }
.text-mono-lg    { font-size: var(--text-mono-lg);    line-height: var(--leading-normal); font-weight: 500; font-variant-numeric: tabular-nums; }
.text-mono       { font-size: var(--text-mono);       line-height: var(--leading-normal); font-weight: 400; font-variant-numeric: tabular-nums; }

/* Tabular nums utility */
.tabular { font-variant-numeric: tabular-nums; }

/* Theme helpers */
.theme-light { background: var(--bg); color: var(--fg); }
.theme-dark  { background: var(--bg-dark); color: var(--fg-dark); }