/* ═══════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root{
  /* Colors */
  --c-bg:        #08080A;
  --c-bg-2:      #0E0E10;
  --c-surface:   #131316;
  --c-surface-2: #1A1A1E;
  --c-line:      rgba(255,255,255,.07);
  --c-line-2:    rgba(255,255,255,.12);
  --c-line-3:    rgba(255,255,255,.22);
  --c-text:      #F4F4F2;
  --c-text-2:    #C8C8C6;
  --c-muted:     #7A7A7E;
  --c-muted-2:   #4A4A4E;
  --c-gold:      #C89B5C;
  --c-gold-2:    #E0B77A;
  --c-gold-3:    #8B6A3D;
  --c-gold-glow: rgba(200,155,92,.45);

  /* Typography */
  --f-display: 'Tajawal', system-ui, sans-serif;
  --f-body:    'IBM Plex Sans Arabic', system-ui, sans-serif;

  --fs-hero:  clamp(3.2rem, 8.4vw, 8rem);
  --fs-h1:    clamp(2.6rem, 6vw, 5.6rem);
  --fs-h2:    clamp(2.2rem, 4.8vw, 4.4rem);
  --fs-h3:    clamp(1.6rem, 3vw, 2.8rem);
  --fs-h4:    clamp(1.2rem, 1.8vw, 1.6rem);
  --fs-lede:  clamp(1.05rem, 1.35vw, 1.35rem);
  --fs-body:  clamp(.95rem, 1.05vw, 1.05rem);
  --fs-sm:    .82rem;
  --fs-xs:    .72rem;

  /* Spacing */
  --sp-section: clamp(6rem, 12vw, 12rem);
  --sp-gutter:  clamp(1.25rem, 3vw, 2.5rem);
  --container:  1440px;

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

  /* Motion */
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --ease-in:   cubic-bezier(.64,0,.78,0);
  --ease-io:   cubic-bezier(.65,0,.35,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --d-fast:   .3s;
  --d-base:   .55s;
  --d-slow:   .9s;
  --d-xslow:  1.4s;
}