/* ============================================================
   DESIGN TOKENS v2 — Ahmed Elflal Personal Brand Website
   Content-First Architecture | SeoLinkX + HeyReach DNA
   Source of truth for all design decisions.
   ============================================================ */

:root {
  /* ── BRAND COLORS ── */
  --color-bg:             #080D1A;
  --color-surface:        #0F1629;
  --color-surface-2:      #161F38;
  --color-surface-3:      #1C2545;
  --color-accent:         #00C4A7;
  --color-accent-hover:   #00DFbF;
  --color-accent-glow:    rgba(0, 196, 167, 0.15);
  --color-accent-dim:     rgba(0, 196, 167, 0.08);
  --color-accent-border:  rgba(0, 196, 167, 0.2);
  --color-gold:           #E8A020;
  --color-gold-hover:     #F5B133;
  --color-gold-glow:      rgba(232, 160, 32, 0.12);
  --color-gold-dim:       rgba(232, 160, 32, 0.06);
  --color-gold-border:    rgba(232, 160, 32, 0.2);
  --color-border:         #1E2D4D;
  --color-border-subtle:  rgba(255, 255, 255, 0.06);

  /* ── TEXT ── */
  --color-text:           #FFFFFF;
  --color-text-secondary: #8892A4;
  --color-text-muted:     #5E6A80;

  /* ── GLOW EFFECTS (SeoLinkX DNA) ── */
  --glow-teal:     0 0 40px rgba(0, 196, 167, 0.3), 0 0 120px rgba(0, 196, 167, 0.1);
  --glow-gold:     0 0 40px rgba(232, 160, 32, 0.25), 0 0 100px rgba(232, 160, 32, 0.08);
  --glow-card:     0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --glow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 196, 167, 0.15);

  /* ── TYPOGRAPHY ── */
  --font-heading: 'SK Concretica', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.5rem;
  --text-hero:  clamp(2.5rem, 5.5vw, 4.5rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ── SPACING ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── LAYOUT ── */
  --max-width:       1200px;
  --max-width-text:  680px;
  --container-pad:   clamp(1.25rem, 5vw, 2rem);
  --section-pad:     clamp(5rem, 10vw, 8rem);

  /* ── BORDERS ── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-teal: 0 4px 24px rgba(0, 196, 167, 0.15);

  /* ── TRANSITIONS ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   150ms;
  --t-base:   250ms;
  --t-slow:   400ms;
  --t-slower: 600ms;

  /* ── Z-INDEX ── */
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-whatsapp: 9999;
}