/* ============================================================
   LABSAAS — Design Tokens: Color + Type
   Fonts: Montserrat (titles) + Roboto (body) via Google Fonts.
   Import this file, then use the semantic vars below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* ---------- Brand: Purple scale (primary) ---------- */
  --purple-50:  #F5F3FF;
  --purple-100: #EDE9FE;
  --purple-200: #DDD6FE;
  --purple-300: #C4B5FD;
  --purple-400: #A78BFA;
  --purple-500: #8B5CF6;
  --purple-600: #7C3AED;  /* PRIMARY */
  --purple-700: #6D28D9;
  --purple-800: #5B21B6;
  --purple-900: #4C1D95;

  /* ---------- Brand: Blue scale (secondary) ---------- */
  --blue-50:  #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;  /* SECONDARY */
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;

  /* ---------- Neutral scale ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
  --neutral-950: #0A0A0F;
  --black:       #000000;

  /* ---------- Brand primitives ---------- */
  --primary:        var(--purple-600);
  --primary-hover:  var(--purple-700);
  --primary-active: var(--purple-800);
  --secondary:        var(--blue-600);
  --secondary-hover:  var(--blue-700);

  /* Signature gradient — use for hero accents, CTAs, key marks */
  --gradient-brand: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
  --gradient-brand-soft: linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%);
  --gradient-text: linear-gradient(120deg, #7C3AED 0%, #2563EB 100%);
  /* Ambient glow used behind hero / glass panels */
  --glow-purple: radial-gradient(60% 60% at 50% 40%, rgba(124,58,237,0.28) 0%, rgba(124,58,237,0) 70%);
  --glow-blue:   radial-gradient(55% 55% at 70% 60%, rgba(37,99,235,0.22) 0%, rgba(37,99,235,0) 70%);

  /* ============ SEMANTIC — LIGHT (default) ============ */
  --bg:          var(--neutral-0);
  --bg-subtle:   var(--neutral-50);
  --bg-muted:    var(--neutral-100);
  --bg-inverse:  var(--neutral-950);
  --surface:     var(--neutral-0);
  --surface-glass: rgba(255,255,255,0.65);

  --fg:          #0B0B12;        /* near-black headings/body */
  --fg-muted:    var(--neutral-500);
  --fg-subtle:   var(--neutral-400);
  --fg-inverse:  var(--neutral-0);
  --fg-on-brand: var(--neutral-0);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  rgba(124,58,237,0.35);

  --ring: rgba(124,58,237,0.45);

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Shadows (soft, premium) ---------- */
  --shadow-xs: 0 1px 2px rgba(16,18,30,0.06);
  --shadow-sm: 0 1px 3px rgba(16,18,30,0.08), 0 1px 2px rgba(16,18,30,0.04);
  --shadow-md: 0 4px 16px rgba(16,18,30,0.08), 0 2px 4px rgba(16,18,30,0.04);
  --shadow-lg: 0 12px 32px rgba(16,18,30,0.10), 0 4px 8px rgba(16,18,30,0.05);
  --shadow-xl: 0 24px 64px rgba(16,18,30,0.14), 0 8px 16px rgba(16,18,30,0.06);
  --shadow-brand: 0 14px 40px rgba(124,58,237,0.30);
  --shadow-brand-sm: 0 6px 18px rgba(124,58,237,0.22);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---------- Type families ---------- */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', monospace;

  /* ---------- Type scale (fluid) ---------- */
  --text-display: 800 clamp(2.75rem, 5.5vw, 4.5rem)/1.04 var(--font-display);
  --text-h1: 800 clamp(2.25rem, 4vw, 3.25rem)/1.08 var(--font-display);
  --text-h2: 700 clamp(1.75rem, 2.6vw, 2.25rem)/1.14 var(--font-display);
  --text-h3: 700 clamp(1.3rem, 1.8vw, 1.5rem)/1.2 var(--font-display);
  --text-h4: 600 1.125rem/1.3 var(--font-display);
  --text-eyebrow: 600 0.8125rem/1 var(--font-display);
  --text-body-lg: 400 1.1875rem/1.6 var(--font-body);
  --text-body: 400 1rem/1.65 var(--font-body);
  --text-body-sm: 400 0.875rem/1.55 var(--font-body);
  --text-caption: 400 0.75rem/1.4 var(--font-body);

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.06em;
  --tracking-eyebrow: 0.14em;
}

/* ============ SEMANTIC — DARK MODE (optional) ============ */
:root[data-theme="dark"],
.theme-dark {
  --bg:          var(--neutral-950);
  --bg-subtle:   #0F1018;
  --bg-muted:    #15161F;
  --bg-inverse:  var(--neutral-0);
  --surface:     #111219;
  --surface-glass: rgba(20,21,30,0.55);

  --fg:          #F5F5FA;
  --fg-muted:    #9CA3AF;
  --fg-subtle:   #6B7280;
  --fg-inverse:  #0B0B12;
  --fg-on-brand: #FFFFFF;

  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --border-brand:  rgba(139,92,246,0.45);

  --ring: rgba(139,92,246,0.55);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-xl: 0 28px 70px rgba(0,0,0,0.6);
}

/* ============ SEMANTIC ELEMENT DEFAULTS ============ */
.ds-display { font: var(--text-display); letter-spacing: var(--tracking-tight); color: var(--fg); }
.ds-h1 { font: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--fg); }
.ds-h2 { font: var(--text-h2); letter-spacing: var(--tracking-snug); color: var(--fg); }
.ds-h3 { font: var(--text-h3); letter-spacing: var(--tracking-snug); color: var(--fg); }
.ds-h4 { font: var(--text-h4); color: var(--fg); }
.ds-eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}
.ds-body-lg { font: var(--text-body-lg); color: var(--fg-muted); }
.ds-body { font: var(--text-body); color: var(--fg-muted); }
.ds-body-sm { font: var(--text-body-sm); color: var(--fg-muted); }
.ds-caption { font: var(--text-caption); color: var(--fg-subtle); }

.ds-gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}