/* ==========================================================================
   Design Tokens — معتز portfolio
   Dark / creative: electric violet -> cyan on near-black.
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --bg: #07070b;
  --bg-2: #0b0b12;
  --surface: #12121c;
  --surface-2: #171723;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);

  /* ---- Color: accents ---- */
  --violet: #8b5cf6;
  --violet-bright: #a855f7;
  --cyan: #22d3ee;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
  --grad-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.18));

  /* ---- Color: text ---- */
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --text-dim: #71717a;

  /* ---- Color: lines ---- */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* ---- Page tint (morphs between sections via JS) ---- */
  --page-bg: var(--bg);

  /* ---- Typography ---- */
  --font-display: "Thmanyah", "IBM Plex Sans Arabic", serif;
  --font-body: "IBM Plex Sans Arabic", "Thmanyah", system-ui, sans-serif;

  --text-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --text-sm: clamp(0.88rem, 0.84rem + 0.2vw, 0.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --text-3xl: clamp(2.6rem, 1.8rem + 4vw, 5rem);
  --text-hero: clamp(3.4rem, 2rem + 9vw, 11rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.7;

  /* ---- Spacing ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-section: clamp(5rem, 3rem + 8vw, 10rem);

  /* ---- Layout ---- */
  --container: 1280px;
  --container-narrow: 920px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  /* ---- Z-index scale ---- */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 50;
  --z-cursor: 80;
  --z-overlay: 90;
  --z-preloader: 100;

  /* ---- Motion ---- */
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Glow ---- */
  --glow-violet: 0 0 40px rgba(139, 92, 246, 0.45);
  --glow-cyan: 0 0 40px rgba(34, 211, 238, 0.4);
  --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}