/* ============================================================
   SMART WEB DESIGN — CSS Custom Properties (Design Tokens)
   ============================================================ */

:root {
  /* --- Colors --- */
  --color-bg:          #0a0a0f;
  --color-surface-1:   #111118;
  --color-surface-2:   #1a1a2a;
  --color-surface-3:   #1e1e32;

  --color-accent:      #00d4ff;
  --color-accent-2:    #7c3aed;
  --color-accent-glow: rgba(0, 212, 255, 0.12);
  --color-accent-dim:  rgba(0, 212, 255, 0.08);

  --color-text-primary:   #f0f0f5;
  --color-text-secondary: #94a3b8;
  --color-text-muted:     #64748b;

  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-accent: rgba(0, 212, 255, 0.22);

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;

  /* --- Gradients --- */
  --gradient-accent:  linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  --gradient-accent-r: linear-gradient(135deg, #7c3aed 0%, #00d4ff 100%);
  --gradient-card:    linear-gradient(145deg, #111118 0%, #1a1a2a 100%);
  --gradient-hero:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,212,255,0.08) 0%, transparent 70%);
  --gradient-text:    linear-gradient(135deg, #00d4ff, #7c3aed);

  /* --- Typography --- */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid font sizes (mobile → desktop) */
  --text-xs:   clamp(0.7rem,  1vw,   0.8rem);
  --text-sm:   clamp(0.82rem, 1.2vw, 0.92rem);
  --text-base: clamp(0.95rem, 1.4vw, 1.05rem);
  --text-lg:   clamp(1.1rem,  1.8vw, 1.2rem);
  --text-xl:   clamp(1.2rem,  2vw,   1.4rem);
  --text-2xl:  clamp(1.4rem,  2.5vw, 1.75rem);
  --text-3xl:  clamp(1.75rem, 3.5vw, 2.25rem);
  --text-4xl:  clamp(2.25rem, 4.5vw, 3rem);
  --text-5xl:  clamp(2.75rem, 5.5vw, 3.75rem);
  --text-hero: clamp(3.25rem, 7vw,   5.5rem);

  /* --- 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;

  /* --- Layout --- */
  --container-max:  1280px;
  --section-pad-y:  clamp(4.5rem, 9vw, 7rem);
  --section-pad-x:  clamp(1.25rem, 5vw, 2rem);

  /* --- Borders & Radius --- */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.55);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--color-border);
  --shadow-accent: 0 0 40px rgba(0, 212, 255, 0.10);
  --shadow-glow:   0 0 60px rgba(0, 212, 255, 0.22), 0 0 100px rgba(124, 58, 237, 0.10);

  /* --- Transitions --- */
  --ease-fast:   150ms ease;
  --ease-base:   300ms ease;
  --ease-smooth: 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-index scale --- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}