/* ============================================
   VARIABLES.CSS — Design System
   Portfolio: Anibal Jhamil Huaman Verastein
   ============================================ */

:root {
  /* ── Colors ── */
  --bg:          #080a0f;
  --bg-alt:      #0a0d14;
  --surface:     #0d1117;
  --surface-2:   #161b22;
  --surface-3:   #1c2128;

  --text:        #e6edf3;
  --text-2:      #b1bac4;
  --muted:       #7d8590;
  --muted-2:     #484f58;

  --accent:      #58a6ff;
  --accent-dim:  rgba(88, 166, 255, 0.12);
  --accent-glow: rgba(88, 166, 255, 0.25);
  --accent-2:    #3fb950;
  --accent-2-dim:rgba(63, 185, 80, 0.12);
  --accent-3:    #d2a8ff;
  --accent-warm: #ffa657;

  --border:      rgba(48, 54, 61, 0.8);
  --border-subtle: rgba(48, 54, 61, 0.4);
  --border-accent: rgba(88, 166, 255, 0.3);

  /* ── Gradient overlays ── */
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(88, 166, 255, 0.08) 0%, transparent 60%);
  --gradient-card: linear-gradient(135deg, rgba(22, 27, 34, 0.9) 0%, rgba(13, 17, 23, 0.95) 100%);
  --gradient-text: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);

  /* ── Typography ── */
  --font-sans:   'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Consolas', monospace;
  --font-display:'Inter', system-ui, sans-serif;

  /* ── Type scale ── */
  --text-xs:   clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
  --text-sm:   clamp(0.8rem,  0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9rem,  0.85rem + 0.25vw, 1rem);
  --text-md:   clamp(1rem,    0.95rem + 0.3vw,  1.125rem);
  --text-lg:   clamp(1.1rem,  1rem + 0.5vw,     1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw,  1.5rem);
  --text-2xl:  clamp(1.5rem,  1.3rem + 1vw,     2rem);
  --text-3xl:  clamp(2rem,    1.6rem + 2vw,     3rem);
  --text-4xl:  clamp(2.5rem,  1.8rem + 3.5vw,   4.5rem);
  --text-5xl:  clamp(3rem,    2rem + 5vw,       6.5rem);
  --text-hero: clamp(3.5rem,  2.5rem + 6vw,     8rem);

  /* ── 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 ── */
  --container:    min(90vw, 1200px);
  --container-sm: min(90vw, 800px);
  --container-lg: min(94vw, 1400px);

  /* ── Border radius ── */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:        300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   600ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index system ── */
  --z-base:     1;
  --z-above:    10;
  --z-navbar:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-cursor:   9999;

  /* ── Effects ── */
  --blur-sm:  blur(8px);
  --blur:     blur(16px);
  --blur-lg:  blur(24px);
  --blur-xl:  blur(40px);

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --shadow:        0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 20px var(--accent-glow);

  /* ── Grain texture ── */
  --noise-opacity: 0.04;
}