/* =====================================================
   HOTLOOP.AI DESIGN TOKENS
   Single source of truth for all visual values
   
   To change colors site-wide, edit values here only.
   ===================================================== */

:root {
  /* ===================
     COLORS - Background
     =================== */
  --bg-primary: #0a0404;
  --bg-secondary: #120808;
  --bg-tertiary: #1a0c0c;
  --bg-glass: rgba(10, 4, 4, 0.2);
  --bg-glass-light: rgba(10, 4, 4, 0.1);
  --bg-glass-strong: rgba(10, 4, 4, 0.45);

  /* ===================
     COLORS - Accent Palette (Pink/Coral/Warm)
     =================== */
  --accent-pink: #e8a0a0;
  --accent-coral: #d4847a;
  --accent-warm: #c96a5a;
  --accent-deep: #b85a4a;
  --accent-dark: #a74a3a;

  /* Accent with transparency */
  --accent-pink-10: rgba(232, 160, 160, 0.1);
  --accent-pink-20: rgba(232, 160, 160, 0.2);
  --accent-pink-40: rgba(232, 160, 160, 0.4);
  --accent-coral-30: rgba(212, 132, 122, 0.3);
  --accent-warm-30: rgba(201, 106, 90, 0.3);

  /* ===================
     COLORS - Text
     =================== */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-subtle: rgba(255, 255, 255, 0.35);

  /* ===================
     COLORS - Borders
     =================== */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(232, 160, 160, 0.15);
  --border-accent-hover: rgba(232, 160, 160, 0.25);
  --border-glow: rgba(232, 160, 160, 0.3);

  /* ===================
     COLORS - Shadows
     =================== */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 15px 50px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 10px 40px rgba(201, 106, 90, 0.3);
  --shadow-glow-hover: 0 15px 50px rgba(201, 106, 90, 0.4);

  /* ===================
     TYPOGRAPHY - Fonts
     =================== */
  --font-primary: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ===================
     TYPOGRAPHY - Weights
     =================== */
  --weight-light: 200;
  --weight-book: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ===================
     TYPOGRAPHY - Sizes
     =================== */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 48px;
  --text-5xl: 64px;

  /* Fluid typography */
  --text-hero: clamp(32px, 6vw, 64px);
  --text-section-title: clamp(28px, 5vw, 48px);
  --text-card-title: clamp(18px, 2.5vw, 22px);
  --text-body-lg: clamp(16px, 2.5vw, 20px);

  /* ===================
     TYPOGRAPHY - Line Heights
     =================== */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.75;

  /* ===================
     TYPOGRAPHY - Letter Spacing
     =================== */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --tracking-caps: 4px;

  /* ===================
     SPACING
     =================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section spacing */
  --section-padding-y: 100px;
  --section-padding-x: 20px;

  /* ===================
     BORDER RADIUS
     =================== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 50px;
  --radius-round: 50%;

  /* ===================
     TRANSITIONS
     =================== */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-slower: 800ms ease;

  /* ===================
     Z-INDEX SCALE
     =================== */
  --z-background: -10;
  --z-content: 10;
  --z-nav: 50;
  --z-modal: 100;
  --z-tooltip: 150;

  /* ===================
     BACKDROP BLUR
     =================== */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 20px;
  --blur-xl: 32px;

  /* ===================
     CONTAINER WIDTHS
     =================== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-content: 800px;
}

/* ===================
   GRADIENT DEFINITIONS
   =================== */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--accent-pink) 0%,
    var(--accent-coral) 50%,
    var(--accent-warm) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-button {
  background: linear-gradient(
    135deg,
    var(--accent-coral) 0%,
    var(--accent-warm) 100%
  );
}

.gradient-border {
  border-image: linear-gradient(
    135deg,
    var(--accent-pink),
    var(--accent-warm)
  ) 1;
}