/* ═══════════════════════════════════════════════════
   DESIGN TOKENS — Omar AlKayyali Portfolio
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --primary:           #7A1022;
  --primary-light:     #9B1A30;
  --primary-dark:      #5A0C19;
  --primary-glow:      rgba(122, 16, 34, 0.35);
  --primary-subtle:    rgba(122, 16, 34, 0.08);

  --secondary:         #1E3A8A;
  --secondary-light:   #2D4FA3;
  --secondary-dark:    #152C6B;
  --secondary-glow:    rgba(30, 58, 138, 0.35);
  --secondary-subtle:  rgba(30, 58, 138, 0.08);

  /* ── Generated Accent Shades ── */
  --accent-warm:       #B5394580;
  --accent-cool:       #4668BB80;
  --accent-gradient:   linear-gradient(135deg, var(--primary), var(--secondary));
  --accent-gradient-h: linear-gradient(90deg, var(--primary), var(--secondary));

  /* ── Background Tiers ── */
  --bg-primary:    #060609;
  --bg-secondary:  #0C0C14;
  --bg-tertiary:   #13131E;
  --bg-elevated:   #1A1A28;
  --bg-surface:    #222232;

  /* ── Text ── */
  --text-primary:   #EEEEF2;
  --text-secondary: #9999AA;
  --text-muted:     #666680;
  --text-accent:    var(--primary-light);

  /* ── Glass ── */
  --glass-bg:      rgba(255, 255, 255, 0.03);
  --glass-border:  rgba(255, 255, 255, 0.06);
  --glass-hover:   rgba(255, 255, 255, 0.08);

  /* ── Typography ── */
  --font-ar:    'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-latin: 'Inter', 'Segoe UI', sans-serif;

  --fs-hero:      clamp(3rem, 8vw, 6rem);
  --fs-h1:        clamp(2rem, 5vw, 3.5rem);
  --fs-h2:        clamp(1.75rem, 4vw, 2.75rem);
  --fs-h3:        clamp(1.1rem, 2vw, 1.5rem);
  --fs-body:      clamp(0.95rem, 1.5vw, 1.1rem);
  --fs-small:     clamp(0.8rem, 1.2vw, 0.9rem);
  --fs-tag:       0.75rem;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:     1.2;
  --lh-normal:    1.6;
  --lh-relaxed:   1.8;

  /* ── Spacing ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ── Borders ── */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    30px;
  --radius-full:  9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.5);
  --shadow-glow-primary:   0 0 30px var(--primary-glow);
  --shadow-glow-secondary: 0 0 30px var(--secondary-glow);

  /* ── Transitions ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   200ms;
  --duration-normal: 400ms;
  --duration-slow:   700ms;

  /* ── Z-Index ── */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;

  /* ── Layout ── */
  --container-width:  1200px;
  --section-padding:  clamp(4rem, 10vh, 8rem) clamp(1rem, 5vw, 2rem);
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-primary:    #F8F9FA;
  --bg-secondary:  #FFFFFF;
  --bg-tertiary:   #F1F3F5;
  --bg-elevated:   #FFFFFF;
  --bg-surface:    #E9ECEF;

  --text-primary:   #1A1A24;
  --text-secondary: #4A4A5A;
  --text-muted:     #6C757D;

  --glass-bg:      rgba(255, 255, 255, 0.6);
  --glass-border:  rgba(0, 0, 0, 0.05);
  --glass-hover:   rgba(255, 255, 255, 0.8);

  --shadow-sm:    0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.12);
}

/* ── Theme Transitions ── */
body.theme-transitions-enabled,
body.theme-transitions-enabled * {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}