/* tokens.css — the whole palette, type scale and spacing rhythm.
 *
 * Deliberately shares nothing with niqati.com (white + #FF6B1A + Inter/Tajawal).
 * walacard.com is a dark, aurora-lit surface with teal and violet accents and a
 * different pair of typefaces, so the two properties never read as one site
 * wearing two skins.
 *
 * This design commits to a single dark look: there is no light theme, so every
 * colour is defined once on :root and body paints an explicit background.
 */
:root {
  /* ground */
  --bg: #070A12;
  --bg-2: #0C1220;
  --bg-3: #111A2E;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.075);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);

  /* accents */
  --teal: #14E3C4;
  --teal-dim: #0FB49B;
  --teal-deep: #06705F;
  --violet: #7C5CFF;
  --violet-dim: #5B3FE0;
  --sky: #5BD1FF;

  /* ink */
  --ink: #E9EEF8;
  --ink-2: #A8B4CC;
  --muted: #6B7894;
  --on-accent: #04140F;

  /* gradients */
  --grad-aurora: linear-gradient(120deg, #14E3C4 0%, #5BD1FF 45%, #7C5CFF 100%);
  --grad-text: linear-gradient(100deg, #E9EEF8 0%, #14E3C4 55%, #7C5CFF 120%);
  --grad-surface: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%);

  /* shadow + glow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.25);
  --shadow-md: 0 18px 44px rgba(0,0,0,.5);
  --shadow-lg: 0 40px 110px rgba(0,0,0,.62);
  --glow-teal: 0 0 0 1px rgba(20,227,196,.28), 0 12px 40px rgba(20,227,196,.24);
  --glow-violet: 0 14px 50px rgba(124,92,255,.3);

  /* shape */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* metrics */
  --container: 1200px;
  --measure: 68ch;
  --nav-h: 68px;

  /* type */
  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-en: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(13px, 0.9vw, 14px);
  --step-0: clamp(16px, 1.05vw, 17px);
  --step-1: clamp(18px, 1.3vw, 20px);
  --step-2: clamp(21px, 1.9vw, 25px);
  --step-3: clamp(26px, 3vw, 36px);
  --step-4: clamp(34px, 5.4vw, 62px);

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.2, .9, .25, 1.1);
  --dur: .55s;
}