/**
 * Qitaf brand tokens — matched to www.qitaf.tech + settings.json
 * Type: Archivo (display + body) + Cairo (Arabic)
 */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Cairo:wght@400;500;600;700;800&display=swap");

:root {
  /* Colors — live Qitaf light */
  --bg: #f3f5f1;
  --bg-glass: rgba(246, 247, 245, 0.38);
  --bg-glass-strong: rgba(255, 255, 255, 0.55);
  --bg-surface: rgba(255, 255, 255, 0.72);
  --bg-subtle: rgba(236, 238, 234, 0.48);
  --site-video-opacity: 1;
  --fg: #0a1210;
  --fg-secondary: #3d4a44;
  --fg-muted: #7a857f;
  --primary: #0e3d2c;          /* dark forest — CTAs / logo */
  --accent: #5eaa42;           /* bright green — highlights */
  --accent-soft: rgba(94, 170, 66, 0.16);
  --accent-glow: rgba(94, 170, 66, 0.42);
  --secondary: #356b52;
  --whatsapp: #25d366;
  --border: rgba(14, 61, 44, 0.12);
  --overlay: rgba(10, 18, 16, 0.72);
  --nav-bg: #071018;
  --nav-fg: #f5f7f6;
  --aura-glow-a: rgba(94, 170, 66, 0.22);
  --aura-glow-b: rgba(14, 61, 44, 0.14);

  /* Type families */
  --font-display: "Archivo", "Cairo", system-ui, sans-serif;
  --font-body: "Archivo", "Cairo", system-ui, sans-serif;
  --font-ar: "Cairo", "Archivo", system-ui, sans-serif;
  --font: var(--font-body); /* backward-compatible alias */

  /* Type scale */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.875rem;     /* 14 */
  --text-base: 1.0625rem;  /* 17 — body */
  --text-md: 1.125rem;     /* 18 — lead */
  --text-lg: 1.25rem;      /* 20 — card titles */
  --text-xl: 1.5rem;       /* 24 */
  --text-2xl: clamp(1.625rem, 2.2vw, 2rem);
  --text-3xl: clamp(1.875rem, 3vw, 2.625rem);   /* section H2 */
  --text-4xl: clamp(2.25rem, 4vw, 3.25rem);
  --text-hero: clamp(2.75rem, 5.8vw, 4.75rem);
  --text-service: clamp(1.75rem, 4.5vw, 3.5rem);

  /* Tracking / leading */
  --tracking-tight: -0.035em;
  --tracking-display: -0.032em;
  --tracking-body: -0.01em;
  --tracking-eyebrow: 0.08em;
  --lh-tight: 0.94;
  --lh-snug: 1.02;
  --lh-heading: 1.08;
  --lh-body: 1.65;
  --lh-ar-heading: 1.28;
  --lh-ar-body: 1.8;

  /* Layout rhythm */
  --max: 1200px;
  --rail: 80px;
  --rail-open: 400px;
  --radius: 40px;
  --gutter: clamp(1.25rem, 4.5vw, 5.5rem);
  --pad-y: clamp(3rem, 7vw, 6rem);
  --pad-x: var(--gutter);
  --pad-d: var(--pad-y) var(--pad-x);
  --pad-t: var(--pad-y) 2rem;
  --pad-p: clamp(2.75rem, 6vw, 3.75rem) 1.25rem;
  --gap-section: clamp(1.75rem, 3vw, 3.25rem);
  --col-gap: clamp(1.5rem, 3.5vw, 3rem);
  --card-w: 928px;

  /* Motion — cinematic */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur: 0.65s;
  --dur-slow: 1.15s;
  --dur-enter: 1.05s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.01s;
  }
}