/* ==========================================================================
   HAPTAGS LLP — DESIGN SYSTEM & TOKENS (Antigravity Aesthetic)
   ========================================================================== */

/* Fonts are loaded from <link rel="stylesheet"> + preconnect in the HTML
   <head> (not @import — @import is render-blocking and adds an extra
   round trip because the browser must download and parse this file
   before it even discovers the font request). Keep both in sync if the
   font stack changes. */

:root {
  /* Color Palette - Google Antigravity Inspired (Light Mode Default) */
  --bg-primary: #fbfbfd;
  --bg-secondary: #f3f4f8;
  --bg-tertiary: #eaecf2;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.98);
  --bg-card-solid: #ffffff;
  
  --text-primary: #10141a;
  --text-secondary: #4a5160;
  --text-muted: #788293;
  --text-inverse: #ffffff;

  --border-subtle: rgba(16, 20, 26, 0.08);
  --border-card: rgba(16, 20, 26, 0.1);
  --border-focus: rgba(66, 133, 244, 0.5);

  /* Brand Accents & Rainbow Spectrum */
  --brand-blue: #2563eb;
  --brand-blue-hover: #1d4ed8;
  --brand-purple: #7c3aed;
  --brand-amber: #d97706;
  --brand-emerald: #059669;
  --brand-rose: #e11d48;
  --brand-cyan: #0891b2;

  --brand-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #e11d48 100%);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(124, 58, 237, 0.08) 50%, rgba(225, 29, 72, 0.08) 100%);
  --brand-rainbow: linear-gradient(90deg, #4285F4 0%, #EA4335 25%, #FBBC05 50%, #34A853 75%, #4285F4 100%);

  /* Glassmorphism & Elevation */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(20px);
  
  --shadow-sm: 0 2px 8px rgba(16, 20, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 20, 26, 0.06);
  --shadow-lg: 0 16px 40px rgba(16, 20, 26, 0.08);
  --shadow-xl: 0 24px 60px rgba(16, 20, 26, 0.12);
  --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.15);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --bg-primary: #090c10;
  --bg-secondary: #0f141c;
  --bg-tertiary: #161c27;
  --bg-card: rgba(18, 23, 33, 0.75);
  --bg-card-hover: rgba(24, 31, 44, 0.9);
  --bg-card-solid: #121824;

  --text-primary: #f0f4f8;
  --text-secondary: #9da8b6;
  --text-muted: #647083;
  --text-inverse: #090c10;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-card: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(96, 165, 250, 0.6);

  --glass-bg: rgba(15, 20, 28, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.75);
  --shadow-glow: 0 0 50px rgba(59, 130, 246, 0.25);
}

/* CSS Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 768px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}

.container-narrow {
  max-width: 1040px;
}

.container-wide {
  max-width: 1480px;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  word-wrap: break-word;
}

h1 {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.65rem, 4.2vw, 3rem);
  letter-spacing: -0.03em;
}

h3 {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
}

h4 {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

p {
  color: var(--text-secondary);
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
}

.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.text-rainbow {
  background: var(--brand-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  background-size: 200% auto;
  animation: rainbowShift 6s linear infinite;
}

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Antigravity Pill Badge */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  backdrop-filter: var(--glass-blur);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.pill-badge:hover {
  transform: translateY(-1px);
  border-color: var(--border-focus);
  box-shadow: var(--shadow-md);
}

.pill-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: 0 0 10px var(--brand-blue);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* Antigravity Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: var(--radius-full);
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-smooth);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--text-primary);
  color: var(--bg-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .btn-primary {
  background: #ffffff;
  color: #0b0f17;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0.96;
}

[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.3);
}

.btn-secondary {
  background: var(--glass-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--bg-card-hover);
  border-color: var(--brand-blue);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
}

.btn-accent {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-accent:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.5);
}

.btn-compact {
  padding: 8px 18px;
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .btn {
    padding: 12px 22px;
    font-size: 0.9rem;
    min-height: 44px; /* Apple minimum touch target */
  }

  .btn-compact {
    padding: 7px 14px;
    font-size: 0.82rem;
    min-height: 38px;
  }
}

/* Touch Device Optimizations - Hide desktop cursor on mobile */
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
  .custom-cursor, #custom-cursor {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  * {
    cursor: auto !important;
  }
}