/* =====================================================
   variables.css — Web Master P&D
   Design tokens: color, typography, spacing, easing, breakpoints
   ===================================================== */

:root {
  /* ---------- Color palette (brand verde menta) ---------- */
  --bg-primary:        #0b0f19;
  --bg-secondary:      #111827;
  --bg-elevated:       rgba(17, 24, 39, 0.6);
  --bg-glass:          rgba(11, 15, 25, 0.55);
  --accent-color:      #49c5b6;
  --accent-hover:      #3bb2a4;
  --accent-soft:       #5fd6c6;
  --accent-glow:        rgba(73, 197, 182, 0.35);
  --accent-glow-strong:rgba(73, 197, 182, 0.55);
  --accent-border:     rgba(73, 197, 182, 0.18);
  --accent-border-strong: rgba(73, 197, 182, 0.4);
  --text-main:         #f9fafb;
  --text-muted:        #9ca3af;
  --text-dim:          #6b7280;
  --danger:            #ef4444;

  /* ---------- Typography ---------- */
  --font-family:       'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  --font-display:      'Orbitron', system-ui, -apple-system, sans-serif;

  /* Fluid typography scale (clamp: min, preferred, max) */
  --fs-display:        clamp(1.375rem, 4vw + 0.625rem, 3rem);
  --fs-h1:             clamp(1.625rem, 2.5vw + 1rem, 3.5rem);
  --fs-h2:             clamp(1.75rem, 2.5vw + 1rem, 3rem);
  --fs-h3:             clamp(1.25rem, 1.5vw + 1rem, 1.875rem);
  --fs-h4:             clamp(1.125rem, 1vw + 0.875rem, 1.5rem);
  --fs-body:           clamp(1rem, 0.25vw + 0.95rem, 1.125rem);
  --fs-small:          clamp(0.875rem, 0.25vw + 0.825rem, 0.9375rem);
  --fs-mono:           clamp(0.75rem, 0.25vw + 0.7rem, 0.875rem);

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           24px;
  --space-6:           32px;
  --space-7:           40px;
  --space-8:           64px;
  --space-9:           96px;
  --space-10:          120px;

  /* ---------- Layout ---------- */
  --container-max:     1280px;
  --container-pad:     clamp(1rem, 4vw, 2.5rem);
  --header-height:     72px;
  --header-height-sm:  60px;
  --radius-sm:         6px;
  --radius-md:         12px;
  --radius-lg:         20px;
  --radius-pill:       999px;

  /* ---------- Motion / Easing ---------- */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:       cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:          150ms;
  --dur-base:          300ms;
  --dur-slow:          600ms;
  --dur-slower:        900ms;

  /* ---------- Z-index layers ---------- */
  --z-base:            1;
  --z-bg:              -1;
  --z-content:         10;
  --z-header:          100;
  --z-mobile-menu:     200;
  --z-modal:           1000;

  /* ---------- Shadows ---------- */
  --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:         0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow:       0 0 20px var(--accent-glow);
  --shadow-glow-strong:0 0 30px var(--accent-glow-strong);
}

/* Breakpoint reference (mobile-first) */
/* Use in media queries: @media (min-width: 768px) {} */
:root {
  --bp-mobile:         640px;
  --bp-tablet:         768px;
  --bp-desktop:        1024px;
  --bp-wide:           1280px;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:        0ms;
    --dur-base:        0ms;
    --dur-slow:        0ms;
    --dur-slower:      0ms;
  }
}