/* ============================================
   TERMINAL GREEN — Design tokens
   Portfolio de Juan David Pestana
   ============================================ */

:root {
  /* --- Color: Dark mode (default) --- */
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-alt: #1a1a1a;
  --border: #2a2a2a;
  --text: #f5f5f5;
  --text-muted: #a3a3a3;
  --accent: #22c55e;
  --accent-hover: #4ade80;
  --accent-soft: rgba(34, 197, 94, 0.12);
  --danger: #ef4444;

  /* --- Typography --- */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Type scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: clamp(2.5rem, 6vw, 4.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* Layout */
  --max-width: 1180px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --border-w: 1px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* Shadow */
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 8px 24px rgba(34, 197, 94, 0.15);
}

/* --- Color: Light mode --- */
[data-theme="light"] {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-alt: #f2f2f2;
  --border: #e5e5e5;
  --text: #0a0a0a;
  --text-muted: #525252;
  --accent: #16a34a;
  --accent-hover: #22c55e;
  --accent-soft: rgba(22, 163, 74, 0.1);
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 8px 24px rgba(22, 163, 74, 0.12);
}

@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;
  }
}