/* BespokeWorks.ai Design System Variables */
:root {
  /* Brand Colors */
  --brand-1: #60a5fa;           /* Primary Blue */
  --brand-2: #8b5cf6;           /* Secondary Purple */
  --brand-accent: #22c55e;      /* Success Green */
  --brand-accent-light: #86efac; /* Light Green for highlights */
  --brand-warning: #fbbf24;     /* Warning Yellow */
  --brand-danger: #ef4444;      /* Error Red */

  /* Text Colors */
  --text-primary: #e5e7eb;      /* Main text - bright white/gray */
  --text-secondary: #cbd5e1;    /* Secondary text - medium gray */
  --text-tertiary: #94a3b8;     /* Tertiary text - darker gray */
  --text-muted: #64748b;        /* Muted text - very dark gray */
  --text-white: #ffffff;        /* Pure white */
  --text-dark: #0a0a0a;         /* Pure dark for buttons/accents */

  /* Background Colors */
  --bg-primary: rgba(10,10,10,1);     /* Main dark background */
  --bg-secondary: rgba(14,14,14,1);   /* Slightly lighter background */
  --bg-card: rgba(0,0,0,0.5);         /* Card backgrounds */
  --bg-card-hover: rgba(0,0,0,0.7);   /* Card hover state */
  --bg-surface-1: rgba(10,10,10,0.7); /* Surface overlay 1 */
  --bg-surface-2: rgba(10,10,10,0.85);/* Surface overlay 2 */

  /* Border Colors */
  --border-primary: rgba(255,255,255,0.1);   /* Main borders */
  --border-secondary: rgba(255,255,255,0.05); /* Subtle borders */
  --border-accent: rgba(96,165,250,0.3);      /* Accent borders */

  /* Typography */
  --font-family: 'Bricolage Grotesque', sans-serif;
  
  /* Font Weights */
  --weight-light: 400;
  --weight-normal: 424;
  --weight-medium: 460;
  --weight-semibold: 560;
  --weight-bold: 600;
  
  /* Font Sizes (Responsive) */
  --text-xs: clamp(10px, 1.5vw, 12px);
  --text-sm: clamp(12px, 1.8vw, 14px);
  --text-base: clamp(14px, 2vw, 16px);
  --text-lg: clamp(16px, 2.5vw, 18px);
  --text-xl: clamp(18px, 3vw, 20px);
  --text-2xl: clamp(20px, 4vw, 24px);
  --text-3xl: clamp(24px, 5vw, 32px);
  --text-4xl: clamp(32px, 6vw, 48px);
  --text-5xl: clamp(36px, 8vw, 80px);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(96,165,250,0.3);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* Base Styles */
body {
  font-family: var(--font-family);
  color: var(--text-primary);
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  margin: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Utility Classes */
.text-accent { color: var(--brand-accent-light); }
.text-brand { color: var(--brand-1); }
.text-secondary { color: var(--brand-2); }
.bg-card { background: var(--bg-card); }
.border-primary { border-color: var(--border-primary); }

/* Typography Classes */
.heading {
  font-size: var(--text-5xl);
  font-weight: var(--weight-normal);
  letter-spacing: -0.07em;
  line-height: 1.1;
  color: var(--text-white);
}

.subheading {
  font-size: var(--text-3xl);
  font-weight: var(--weight-normal);
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: var(--text-primary);
}

.body-text {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  color: var(--text-secondary);
}