/*
 * DESIGN SYSTEM - Eleazar Ogoyemi Portfolio
 * ==========================================
 * A comprehensive design token system for consistent, modern UI
 * 
 * Usage: Import this file FIRST before other stylesheets
 * All variables are prefixed with --ds- for namespacing
 */

/* ============================================
   COLOR SYSTEM
   ============================================ */

:root {
  /* === Core Brand Colors === */
  --ds-primary-h: 234;
  --ds-primary-s: 74%;
  --ds-primary-l: 66%;
  --ds-primary: hsl(
    var(--ds-primary-h),
    var(--ds-primary-s),
    var(--ds-primary-l)
  );
  --ds-primary-light: hsl(var(--ds-primary-h), var(--ds-primary-s), 75%);
  --ds-primary-dark: hsl(var(--ds-primary-h), var(--ds-primary-s), 50%);

  --ds-secondary-h: 280;
  --ds-secondary-s: 50%;
  --ds-secondary-l: 55%;
  --ds-secondary: hsl(
    var(--ds-secondary-h),
    var(--ds-secondary-s),
    var(--ds-secondary-l)
  );

  /* === Accent Colors === */
  --ds-accent-cyan: #00f2fe;
  --ds-accent-pink: #f5576c;
  --ds-accent-purple: #a855f7;
  --ds-accent-blue: #3b82f6;
  --ds-accent-green: #10b981;
  --ds-accent-orange: #f97316;

  /* === Gradients === */
  --ds-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ds-gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --ds-gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --ds-gradient-hero: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 50%,
    #f093fb 100%
  );
  --ds-gradient-glow: radial-gradient(
    circle,
    rgba(102, 126, 234, 0.4) 0%,
    transparent 70%
  );
  --ds-gradient-mesh:
    radial-gradient(at 40% 20%, hsla(280, 100%, 70%, 0.3) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(234, 74%, 66%, 0.2) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(280, 50%, 55%, 0.2) 0px, transparent 50%),
    radial-gradient(
      at 80% 50%,
      hsla(200, 100%, 60%, 0.15) 0px,
      transparent 50%
    ),
    radial-gradient(at 0% 100%, hsla(234, 74%, 66%, 0.2) 0px, transparent 50%);

  /* === Dark Theme (Default) === */
  --ds-bg-primary: #000000;
  --ds-bg-secondary: #0a0a0a;
  --ds-bg-tertiary: #111111;
  --ds-bg-elevated: #1a1a1a;

  --ds-surface-1: rgba(255, 255, 255, 0.03);
  --ds-surface-2: rgba(255, 255, 255, 0.05);
  --ds-surface-3: rgba(255, 255, 255, 0.08);
  --ds-surface-4: rgba(255, 255, 255, 0.12);

  --ds-text-primary: #ffffff;
  --ds-text-secondary: #a0a0a0;
  --ds-text-tertiary: #666666;
  --ds-text-accent: var(--ds-accent-cyan);
  --ds-text-muted: #4a4a4a;

  --ds-border-subtle: rgba(255, 255, 255, 0.06);
  --ds-border-default: rgba(255, 255, 255, 0.1);
  --ds-border-strong: rgba(255, 255, 255, 0.2);
  --ds-border-accent: rgba(102, 126, 234, 0.5);

  /* === Shadows === */
  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --ds-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --ds-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --ds-shadow-glow: 0 0 40px rgba(102, 126, 234, 0.3);
  --ds-shadow-glow-lg: 0 0 80px rgba(102, 126, 234, 0.4);
  --ds-shadow-hover: 0 20px 40px rgba(102, 126, 234, 0.25);

  /* === Glass Effects === */
  --ds-glass-bg: rgba(255, 255, 255, 0.05);
  --ds-glass-bg-strong: rgba(255, 255, 255, 0.1);
  --ds-glass-border: rgba(255, 255, 255, 0.1);
  --ds-glass-blur: blur(20px);
  --ds-glass-blur-strong: blur(40px);
}

/* ============================================
   LIGHT THEME (Optional Toggle)
   ============================================ */

[data-theme="light"] {
  --ds-bg-primary: #ffffff;
  --ds-bg-secondary: #f8f9fa;
  --ds-bg-tertiary: #f1f3f4;
  --ds-bg-elevated: #ffffff;

  --ds-surface-1: rgba(0, 0, 0, 0.02);
  --ds-surface-2: rgba(0, 0, 0, 0.04);
  --ds-surface-3: rgba(0, 0, 0, 0.06);
  --ds-surface-4: rgba(0, 0, 0, 0.08);

  --ds-text-primary: #1a1a1a;
  --ds-text-secondary: #666666;
  --ds-text-tertiary: #999999;
  --ds-text-muted: #cccccc;

  --ds-border-subtle: rgba(0, 0, 0, 0.04);
  --ds-border-default: rgba(0, 0, 0, 0.1);
  --ds-border-strong: rgba(0, 0, 0, 0.2);

  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --ds-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);

  --ds-glass-bg: rgba(255, 255, 255, 0.7);
  --ds-glass-bg-strong: rgba(255, 255, 255, 0.9);
  --ds-glass-border: rgba(0, 0, 0, 0.1);
}

/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */

:root {
  /* === Font Families === */
  --ds-font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ds-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  --ds-font-display: "Inter", sans-serif;

  /* === Font Weights === */
  --ds-weight-light: 300;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-weight-extrabold: 800;

  /* === Fluid Type Scale (clamp for responsiveness) === */
  --ds-text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --ds-text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --ds-text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --ds-text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --ds-text-xl: clamp(1.15rem, 1rem + 0.5vw, 1.25rem);
  --ds-text-2xl: clamp(1.4rem, 1.2rem + 0.75vw, 1.5rem);
  --ds-text-3xl: clamp(1.7rem, 1.4rem + 1vw, 1.875rem);
  --ds-text-4xl: clamp(2rem, 1.6rem + 1.5vw, 2.25rem);
  --ds-text-5xl: clamp(2.5rem, 2rem + 2vw, 3rem);
  --ds-text-6xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);
  --ds-text-7xl: clamp(3.5rem, 3rem + 3vw, 4.5rem);
  --ds-text-hero: clamp(2.5rem, 2rem + 4vw, 5rem);

  /* === Line Heights === */
  --ds-leading-none: 1;
  --ds-leading-tight: 1.2;
  --ds-leading-snug: 1.375;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.625;
  --ds-leading-loose: 1.8;

  /* === Letter Spacing === */
  --ds-tracking-tighter: -0.05em;
  --ds-tracking-tight: -0.025em;
  --ds-tracking-normal: 0;
  --ds-tracking-wide: 0.025em;
  --ds-tracking-wider: 0.05em;
  --ds-tracking-widest: 0.1em;
}

/* ============================================
   SPACING SYSTEM
   ============================================ */

:root {
  /* === Base Spacing Scale === */
  --ds-space-0: 0;
  --ds-space-1: 0.25rem; /* 4px */
  --ds-space-2: 0.5rem; /* 8px */
  --ds-space-3: 0.75rem; /* 12px */
  --ds-space-4: 1rem; /* 16px */
  --ds-space-5: 1.25rem; /* 20px */
  --ds-space-6: 1.5rem; /* 24px */
  --ds-space-8: 2rem; /* 32px */
  --ds-space-10: 2.5rem; /* 40px */
  --ds-space-12: 3rem; /* 48px */
  --ds-space-16: 4rem; /* 64px */
  --ds-space-20: 5rem; /* 80px */
  --ds-space-24: 6rem; /* 96px */
  --ds-space-32: 8rem; /* 128px */

  /* === Section Spacing === */
  --ds-section-sm: clamp(3rem, 6vw, 5rem);
  --ds-section-md: clamp(4rem, 8vw, 6rem);
  --ds-section-lg: clamp(5rem, 10vw, 8rem);
  --ds-section-xl: clamp(6rem, 12vw, 10rem);
}

/* ============================================
   LAYOUT SYSTEM
   ============================================ */

:root {
  /* === Container Widths === */
  --ds-container-xs: 20rem; /* 320px */
  --ds-container-sm: 24rem; /* 384px */
  --ds-container-md: 28rem; /* 448px */
  --ds-container-lg: 32rem; /* 512px */
  --ds-container-xl: 36rem; /* 576px */
  --ds-container-2xl: 42rem; /* 672px */
  --ds-container-3xl: 48rem; /* 768px */
  --ds-container-4xl: 56rem; /* 896px */
  --ds-container-5xl: 64rem; /* 1024px */
  --ds-container-6xl: 72rem; /* 1152px */
  --ds-container-7xl: 80rem; /* 1280px */
  --ds-container-full: 100%;

  /* === Border Radius === */
  --ds-radius-none: 0;
  --ds-radius-sm: 0.25rem;
  --ds-radius-md: 0.5rem;
  --ds-radius-lg: 0.75rem;
  --ds-radius-xl: 1rem;
  --ds-radius-2xl: 1.5rem;
  --ds-radius-3xl: 2rem;
  --ds-radius-full: 9999px;

  /* === Z-Index Scale === */
  --ds-z-base: 0;
  --ds-z-dropdown: 100;
  --ds-z-sticky: 200;
  --ds-z-fixed: 300;
  --ds-z-modal-backdrop: 400;
  --ds-z-modal: 500;
  --ds-z-popover: 600;
  --ds-z-tooltip: 700;
  --ds-z-toast: 800;
  --ds-z-max: 9999;
}

/* ============================================
   ANIMATION & TRANSITIONS
   ============================================ */

:root {
  /* === Timing Functions === */
  --ds-ease-linear: linear;
  --ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ds-ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --ds-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* === Durations === */
  --ds-duration-instant: 50ms;
  --ds-duration-fast: 150ms;
  --ds-duration-normal: 300ms;
  --ds-duration-slow: 500ms;
  --ds-duration-slower: 700ms;
  --ds-duration-slowest: 1000ms;

  /* === Common Transitions === */
  --ds-transition-fast: all 150ms var(--ds-ease-out);
  --ds-transition-normal: all 300ms var(--ds-ease-out);
  --ds-transition-slow: all 500ms var(--ds-ease-out);
  --ds-transition-colors:
    color, background-color, border-color, fill, stroke 200ms var(--ds-ease-out);
  --ds-transition-transform: transform 300ms var(--ds-ease-out);
  --ds-transition-opacity: opacity 200ms var(--ds-ease-out);
}

/* ============================================
   COMPONENT TOKENS
   ============================================ */

:root {
  /* === Buttons === */
  --ds-btn-height-sm: 2rem;
  --ds-btn-height-md: 2.5rem;
  --ds-btn-height-lg: 3rem;
  --ds-btn-padding-x: var(--ds-space-6);
  --ds-btn-radius: var(--ds-radius-full);
  --ds-btn-font-weight: var(--ds-weight-semibold);

  /* === Cards === */
  --ds-card-bg: var(--ds-glass-bg);
  --ds-card-border: var(--ds-glass-border);
  --ds-card-radius: var(--ds-radius-2xl);
  --ds-card-padding: var(--ds-space-8);
  --ds-card-shadow: var(--ds-shadow-md);

  /* === Inputs === */
  --ds-input-height: 3rem;
  --ds-input-padding-x: var(--ds-space-4);
  --ds-input-radius: var(--ds-radius-xl);
  --ds-input-border: var(--ds-border-default);
  --ds-input-bg: var(--ds-surface-2);

  /* === Navbar === */
  --ds-nav-height: 4.5rem;
  --ds-nav-bg: rgba(10, 10, 10, 0.8);
  --ds-nav-blur: var(--ds-glass-blur);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* === Text Gradients === */
.text-gradient-primary {
  background: var(--ds-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-secondary {
  background: var(--ds-gradient-secondary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-accent {
  background: var(--ds-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Glass Effects === */
.glass {
  background: var(--ds-glass-bg);
  backdrop-filter: var(--ds-glass-blur);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  border: 1px solid var(--ds-glass-border);
}

.glass-strong {
  background: var(--ds-glass-bg-strong);
  backdrop-filter: var(--ds-glass-blur-strong);
  -webkit-backdrop-filter: var(--ds-glass-blur-strong);
  border: 1px solid var(--ds-border-strong);
}

/* === Glow Effects === */
.glow {
  box-shadow: var(--ds-shadow-glow);
}

.glow-lg {
  box-shadow: var(--ds-shadow-glow-lg);
}

.glow-text {
  text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

/* === Hover Lift === */
.hover-lift {
  transition: var(--ds-transition-normal);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--ds-shadow-hover);
}

/* === Gradient Border === */
.gradient-border {
  position: relative;
  background: var(--ds-bg-secondary);
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--ds-gradient-primary);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* === Focus Visible === */
.focus-ring:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
}

/* === Screen Reader Only === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

@keyframes ds-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ds-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ds-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ds-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ds-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ds-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ds-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes ds-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes ds-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes ds-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ds-bounce {
  0%,
  100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* === Animation Utility Classes === */
.animate-fade-in {
  animation: ds-fade-in var(--ds-duration-normal) var(--ds-ease-out) forwards;
}

.animate-fade-in-up {
  animation: ds-fade-in-up var(--ds-duration-normal) var(--ds-ease-out) forwards;
}

.animate-fade-in-down {
  animation: ds-fade-in-down var(--ds-duration-normal) var(--ds-ease-out)
    forwards;
}

.animate-scale-in {
  animation: ds-scale-in var(--ds-duration-normal) var(--ds-ease-out) forwards;
}

.animate-float {
  animation: ds-float 6s var(--ds-ease-in-out) infinite;
}

.animate-pulse {
  animation: ds-pulse 2s var(--ds-ease-in-out) infinite;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  background-size: 200% 100%;
  animation: ds-shimmer 2s infinite;
}

/* === Stagger Animation Delays === */
.stagger-1 {
  animation-delay: 0.1s;
}
.stagger-2 {
  animation-delay: 0.2s;
}
.stagger-3 {
  animation-delay: 0.3s;
}
.stagger-4 {
  animation-delay: 0.4s;
}
.stagger-5 {
  animation-delay: 0.5s;
}
.stagger-6 {
  animation-delay: 0.6s;
}