/* Design Tokens — Forevia */
:root {
  /* Color — Navy + Electric Blue + Ice Blue + White */
  --ink-900:#0B1220;
  --ink-700:#1E293B;
  --ink-500:#475569;
  --ink-300:#94A3B8;
  --paper:#F8FAFC;
  --mist:#F1F5F9;
  --line:#E2E8F0;
  --brand-600:#2563EB;
  --brand-500:#3B82F6;
  --brand-100:#DBEAFE;
  --accent-500:#38BDF8;
  --accent-600:#0EA5E9;
  --success:#12805C;
  --warning:#B7791F;
  --danger:#C53030;

  /* Type */
  --font-en:"Inter", system-ui, -apple-system, sans-serif;
  --font-ar:"IBM Plex Sans Arabic", "Tahoma", sans-serif;
  --fs-0:clamp(.875rem,.85rem + .1vw,.95rem);
  --fs-1:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-2:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-3:clamp(1.6rem,1.3rem + 1.2vw,2.25rem);
  --fs-4:clamp(2.1rem,1.5rem + 2.6vw,3.5rem);

  /* Space */
  --s-1:.25rem; --s-2:.5rem; --s-3:1rem; --s-4:1.5rem; --s-5:2.5rem; --s-6:4rem; --s-7:6rem;

  /* Radius */
  --r-sm:8px; --r-md:14px; --r-lg:22px;

  /* Shadow */
  --shadow-1:0 1px 2px rgba(11,18,32,.06),0 4px 16px rgba(11,18,32,.06);
  --shadow-2:0 2px 4px rgba(11,18,32,.08),0 8px 32px rgba(11,18,32,.1);

  /* Layout */
  --container:1200px;
  --nav-h:72px;
}

/* Arabic overrides */
:root[dir="rtl"] {
  --font-en:"IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-ar:"IBM Plex Sans Arabic", "Tahoma", sans-serif;
}

[dir="rtl"] body {
  font-family: var(--font-ar);
  line-height: 1.8;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --ink-900:#F0F4F8;
  --ink-700:#C8D4E0;
  --ink-500:#8A9BB0;
  --ink-300:#4A5D73;
  --paper:#0B1B2B;
  --mist:#0F2236;
  --line:#1E3248;
  --brand-600:#5A9CF6;
  --brand-500:#3B82F6;
  --brand-100:#132B4A;
  --shadow-1:0 1px 2px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.25);
  --shadow-2:0 2px 4px rgba(0,0,0,.25),0 8px 32px rgba(0,0,0,.3);
}

[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink-900);
}

[data-theme="dark"] img {
  opacity: .9;
}

[data-theme="dark"] .hero__code-card {
  background: #0D1F33;
  border-color: #1E3248;
}

/* Hero keeps a dark surface in dark mode (var(--ink-900) flips to light there) */
[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #0D1F33, #132B4A);
}

/* Lead/code use --ink-300, which flips dark in dark mode — keep them light on the dark hero */
[data-theme="dark"] .hero__lead,
[data-theme="dark"] .hero__code {
  color: #A9B6C4;
}

/* Code area blends into the dark card in dark mode (light mode: #0B1220 in layout.css) */
[data-theme="dark"] .hero__code {
  background: transparent;
}

[data-theme="dark"] .section--alt {
  background: #0E1F33;
}

[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .testimonial-card {
  background: #0F2236;
  border-color: #1E3248;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
  background: #0D1F33;
  border-color: #1E3248;
  color: var(--ink-900);
}

[data-theme="dark"] .footer {
  background: #081520;
}

[data-theme="dark"] .cta-band {
  background: linear-gradient(135deg, #0D1F33, #132B4A);
}

[data-theme="dark"] .trust-bar {
  background: #0E1F33;
  border-color: #1E3248;
}