/* ============================================================
   Partigo landing — design tokens (OKLCH)
   Ported verbatim from the Partigo design system
   (project 5f645b5c). Shared with the admin console + app.
   Order: fonts → colors → typography → spacing → effects → base
   ============================================================ */

/* ---- fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* families */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-ui: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-num: "Space Grotesk", "Inter", system-ui, sans-serif;
  --num-feature: "tnum" 1, "lnum" 1;

  /* type scale */
  --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem;
  --fs-22: 1.375rem; --fs-28: 1.75rem; --fs-36: 2.25rem;
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.02em;

  /* brand accent */
  --accent: oklch(62% 0.17 250);
  --accent-press: oklch(54% 0.17 250);
  --accent-weak: oklch(95% 0.03 250);
  --on-accent: oklch(100% 0 0);

  /* surfaces */
  --bg: oklch(98.5% 0 0);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(96.5% 0.004 250);
  --border: oklch(90% 0.006 250);
  --border-strong: oklch(84% 0.008 250);

  /* text */
  --text: oklch(22% 0.01 260);
  --text-muted: oklch(52% 0.01 260);
  --text-faint: oklch(66% 0.01 260);

  /* semantic */
  --success: oklch(63% 0.15 150);
  --warning: oklch(75% 0.15 75);
  --danger: oklch(58% 0.20 25);
  --info: oklch(65% 0.12 230);
  --success-weak: oklch(95% 0.04 150);
  --warning-weak: oklch(96% 0.05 85);
  --danger-weak: oklch(95% 0.04 25);
  --info-weak: oklch(95% 0.03 230);
  --on-success: oklch(100% 0 0);
  --on-warning: oklch(28% 0.05 75);
  --on-danger: oklch(100% 0 0);
  --on-info: oklch(100% 0 0);
  --overlay: oklch(22% 0.01 260 / 0.45);

  /* spacing (8pt) */
  --sp-2: 2px; --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-12: 12px;
  --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
  --sp-48: 48px; --sp-64: 64px;

  /* radius */
  --r-8: 8px; --r-14: 14px; --r-20: 20px; --r-pill: 999px;

  /* elevation */
  --shadow-card: 0 1px 2px oklch(22% 0.01 260 / 0.06), 0 4px 12px oklch(22% 0.01 260 / 0.06);
  --shadow-card-hover: 0 2px 4px oklch(22% 0.01 260 / 0.08), 0 8px 20px oklch(22% 0.01 260 / 0.09);
  --shadow-popover: 0 4px 8px oklch(22% 0.01 260 / 0.10), 0 16px 40px oklch(22% 0.01 260 / 0.16);
  --shadow-sheet: 0 -2px 8px oklch(22% 0.01 260 / 0.06), 0 -12px 40px oklch(22% 0.01 260 / 0.16);

  --ring: 0 0 0 3px oklch(62% 0.17 250 / 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms; --dur-mid: 240ms; --dur-slow: 360ms;
  --press-scale: 0.98;
}

[data-theme="dark"] {
  --accent: oklch(70% 0.15 250);
  --accent-press: oklch(62% 0.16 250);
  --accent-weak: oklch(36% 0.06 250);
  --on-accent: oklch(16% 0.02 260);

  --bg: oklch(17% 0.012 260);
  --surface: oklch(21% 0.014 260);
  --surface-2: oklch(25% 0.014 260);
  --border: oklch(30% 0.012 260);
  --border-strong: oklch(38% 0.014 260);

  --text: oklch(96% 0.004 260);
  --text-muted: oklch(72% 0.01 260);
  --text-faint: oklch(56% 0.012 260);

  --success: oklch(72% 0.15 150);
  --warning: oklch(80% 0.15 80);
  --danger: oklch(68% 0.19 25);
  --info: oklch(74% 0.12 230);
  --success-weak: oklch(32% 0.06 150);
  --warning-weak: oklch(34% 0.07 80);
  --danger-weak: oklch(33% 0.08 25);
  --info-weak: oklch(33% 0.06 230);
  --on-success: oklch(16% 0.02 150);
  --on-warning: oklch(20% 0.04 80);
  --on-danger: oklch(16% 0.02 25);
  --on-info: oklch(16% 0.02 230);
  --overlay: oklch(8% 0.01 260 / 0.6);

  --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.4), 0 4px 12px oklch(0% 0 0 / 0.4);
  --shadow-card-hover: 0 2px 4px oklch(0% 0 0 / 0.5), 0 8px 20px oklch(0% 0 0 / 0.5);
  --shadow-popover: 0 4px 8px oklch(0% 0 0 / 0.5), 0 16px 40px oklch(0% 0 0 / 0.6);
  --shadow-sheet: 0 -2px 8px oklch(0% 0 0 / 0.4), 0 -12px 40px oklch(0% 0 0 / 0.6);
  --ring: 0 0 0 3px oklch(70% 0.15 250 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; --press-scale: 1; }
}

/* ---- base reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: var(--fs-16); line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:lang(ar), :lang(ur), [dir="rtl"] { font-family: var(--font-ar); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug); line-height: var(--lh-snug); margin: 0;
}
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "Space Grotesk", var(--font-ar); }
button { font-family: inherit; }
::selection { background: var(--accent-weak); }

/* numerals stay tabular + LTR even inside RTL */
.pg-num {
  font-family: var(--font-num);
  font-feature-settings: var(--num-feature);
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr; unicode-bidi: isolate;
}