/* ============================================================
   Soul IA — Colors & Typography
   Source: soulIA-dev/soulia-mainweb tailwind + globals.css +
   observed usage in Hero/Services/Values/Header/Footer.tsx
   ============================================================ */

/* Fonts — the production site uses Arial/system. We provide a
   branded display upgrade (Inter) loaded from Google Fonts for
   richer type hierarchy in marketing artifacts. The Inter stack
   retains a neutral, modern feel that matches the wordmark. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -- Brand core (from logo + gradient-text #ff6b35 → #f7931e) -- */
  --soul-orange-500: #ff6b35;   /* primary CTA, logo ring, gradients */
  --soul-orange-600: #e55a2b;   /* hover, deeper gradient end */
  --soul-orange-700: #c64a1f;
  --soul-orange-400: #ff8a5c;
  --soul-orange-300: #ffae87;
  --soul-orange-200: #ffd0b5;
  --soul-orange-100: #fff0e6;
  --soul-amber-500:  #f7931e;   /* secondary / gradient end (gradient-text) */

  --soul-cyan-500:   #2ec7d4;   /* IA accent (logo highlights, "IA" wordmark) */
  --soul-cyan-400:   #5fd7e0;
  --soul-cyan-300:   #8fe4ea;
  --soul-cyan-600:   #1fa9b4;

  /* -- Surfaces -- */
  --soul-black:       #000000;  /* Footer, Hero gradient start/end */
  --soul-night:       #03070a;  /* Fixed header + dropdown background */
  --soul-ink:         #0a0a0a;
  --soul-graphite:    #141414;  /* Cube face tint */
  --soul-slate-900:   #111827;
  --soul-slate-800:   #1f2937;
  --soul-slate-700:   #334155;  /* grid lines at 5% */
  --soul-gray-400:    #9ca3af;  /* gray-400 description text on dark */
  --soul-gray-300:    #d1d5db;  /* quote text */
  --soul-gray-200:    #e5e7eb;
  --soul-gray-100:    #f3f4f6;
  --soul-gray-50:     #f9fafb;  /* bg-gray-50 Values section */
  --soul-white:       #ffffff;

  /* -- Semantic foreground / background (light + dark) -- */
  --bg:              var(--soul-white);
  --bg-muted:        var(--soul-gray-50);
  --bg-inverse:      var(--soul-black);
  --fg:              #0a0a0a;
  --fg-muted:        #4b5563;        /* gray-600 body on light */
  --fg-subtle:       var(--soul-gray-400);
  --fg-inverse:      var(--soul-white);
  --border:          rgba(0,0,0,0.08);
  --border-on-dark:  rgba(255,255,255,0.10);

  /* -- Accents / semantic tokens -- */
  --primary:         var(--soul-orange-500);
  --primary-hover:   var(--soul-orange-600);
  --primary-fg:      var(--soul-white);
  --accent:          var(--soul-cyan-500);
  --ring:            var(--soul-orange-500);

  /* Translucent primary tints used across cards/badges on dark bg */
  --primary-10:      rgba(255,107,53,0.10);
  --primary-20:      rgba(255,107,53,0.20);
  --primary-30:      rgba(255,107,53,0.30);
  --primary-glow:    0 0 20px rgba(255,107,53,0.25),
                     0 0 60px rgba(255,107,53,0.10);

  /* -- Gradients (observed in Hero / titles / CTA stripe) -- */
  --grad-orange-text:  linear-gradient(135deg,#ff6b35 0%, #f7931e 100%);
  --grad-orange-cta:   linear-gradient(90deg,#ff6b35 0%, #e55a2b 100%);
  --grad-hero-bg:      linear-gradient(135deg,#000 0%, #111827 50%, #000 100%);
  --grad-dark-stripe:  linear-gradient(90deg,#000 0%, #111827 100%);

  /* -- Radii (Radix/shadcn radius = 0.5rem; cards use xl/2xl) -- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    8px;    /* --radius in tailwind */
  --radius-lg: 12px;   /* rounded-xl cards */
  --radius-xl: 16px;
  --radius-2xl:24px;   /* rounded-2xl CTA stripe */
  --radius-full: 9999px;

  /* -- Shadow system -- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --shadow:     0 4px 12px rgba(0,0,0,0.06);    /* shadow-sm on cards */
  --shadow-md:  0 8px 24px rgba(0,0,0,0.08);    /* shadow-md hover */
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.12);   /* shadow-lg cards */
  --shadow-xl:  0 24px 60px rgba(0,0,0,0.16);   /* hover */
  --shadow-cta: 0 16px 40px rgba(255,107,53,0.25); /* hover:shadow-orange-500/25 */

  /* -- Spacing (Tailwind default 4px grid) -- */
  --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-24:96px;

  /* -- Type -- */
  --font-display: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-body:    'Inter', Arial, Helvetica, sans-serif; /* production uses Arial */
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (matches tailwind text-* used across site) */
  --fs-xs:   12px;   /* --fs-sm lower */
  --fs-sm:   14px;   /* body-small */
  --fs-base: 16px;   /* body */
  --fs-lg:   18px;   /* lead */
  --fs-xl:   20px;   /* card title */
  --fs-2xl:  24px;   /* h3 */
  --fs-3xl:  30px;   /* h2 mobile */
  --fs-4xl:  36px;   /* h2 / h1 mobile */
  --fs-5xl:  48px;   /* h1 */
  --fs-6xl:  60px;   /* hero */
  --fs-7xl:  72px;   /* display */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* -- Motion (from src/index.css) -- */
  --ease-standard:  cubic-bezier(.4,0,.2,1);
  --ease-spring:    cubic-bezier(.34,1.56,.64,1);
  --dur-fast:   200ms;    /* * { transition: all .2s ease } */
  --dur-base:   300ms;
  --dur-slow:   600ms;    /* fade-in-up */
}

/* ========== Semantic element styles ========== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-7xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-3xl), 4.5vw, var(--fs-5xl));
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--primary);
  letter-spacing: 0.02em;
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--primary-20);
  color: var(--primary);
  border: 1px solid var(--primary-30);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  backdrop-filter: blur(6px);
}
.gradient-text {
  background: var(--grad-orange-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
code, .mono, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.wordmark-ia { color: var(--soul-cyan-500); }
.wordmark-soul { color: var(--soul-orange-500); }