@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   The Talent Factory — Marketing Site
   styles.css  |  Enterprise Light-Mode Design System
   ========================================================================== */

/* ------------------------------------------------------------------ */
/* 1. CSS Custom Properties                                             */
/* ------------------------------------------------------------------ */
:root {
  /* ---- Brand ---- */
  --violet:         #7C3AED;
  --violet-dark:    #6D28D9;
  --violet-darker:  #5B21B6;
  --violet-light:   #EDE9FE;
  --violet-mid:     #DDD6FE;
  --violet-surface: #F5F3FF;

  /* ---- Neutral palette ---- */
  --white:     #FFFFFF;
  --gray-50:   #F9FAFB;
  --gray-100:  #F3F4F6;
  --gray-200:  #E5E7EB;
  --gray-300:  #D1D5DB;
  --gray-400:  #9CA3AF;
  --gray-500:  #6B7280;
  --gray-600:  #4B5563;
  --gray-700:  #374151;
  --gray-800:  #1F2937;
  --gray-900:  #111827;

  /* ---- Semantic surfaces ---- */
  --surface-0:    var(--white);
  --surface-1:    var(--gray-50);
  --surface-2:    var(--gray-100);
  --surface-brand: var(--violet-surface);

  /* ---- Semantic text ---- */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary:  var(--gray-400);
  --text-brand:     var(--violet);
  --text-on-brand:  #FFFFFF;

  /* ---- Dark areas (footer, CTA) ---- */
  --navy:       #111827;
  --navy-mid:   #1F2937;
  --navy-light: #374151;
  --on-navy:             rgba(255,255,255,0.92);
  --on-navy-muted:       rgba(255,255,255,0.60);
  --on-navy-faint:       rgba(255,255,255,0.35);
  --border-navy:         rgba(255,255,255,0.10);

  /* ---- Semantic borders ---- */
  --border:        var(--gray-200);
  --border-subtle: var(--gray-100);
  --border-strong: var(--gray-300);

  /* ---- Status ---- */
  --success:   #059669;
  --warning:   #D97706;
  --danger:    #DC2626;
  --info:      #2563EB;
  --teal:      #0D9488;

  /* ---- Status surfaces ---- */
  --success-surface: #ECFDF5;
  --warning-surface: #FFFBEB;
  --danger-surface:  #FEF2F2;
  --info-surface:    #EFF6FF;

  /* ---- Typography ---- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* ---- Font sizes ---- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */

  /* ---- Spacing (4-pt grid) ---- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- Borders ---- */
  --r-sm:   0.25rem;
  --r:      0.375rem;
  --r-md:   0.5rem;
  --r-lg:   0.625rem;
  --r-xl:   0.75rem;
  --r-2xl:  1rem;
  --r-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow:    0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.18);
  --shadow-brand: 0 4px 16px 0 rgba(124, 58, 237, 0.22);

  /* ---- Layout ---- */
  --max-w:    1200px;
  --max-w-lg: 1400px;
  --nav-h:    72px;

  /* ---- Transitions ---- */
  --fast: 150ms ease;
  --base: 250ms ease;
  --slow: 400ms ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { letter-spacing: -0.04em; line-height: 1.06; }
h2 { letter-spacing: -0.03em; line-height: 1.1; }
h3 { letter-spacing: -0.02em; }

/* ------------------------------------------------------------------ */
/* 3. Typography utilities                                              */
/* ------------------------------------------------------------------ */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-4xl   { font-size: var(--text-4xl); }
.text-5xl   { font-size: var(--text-5xl); }
.text-6xl   { font-size: var(--text-6xl); }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.leading-tight  { line-height: 1.2; }
.leading-snug   { line-height: 1.35; }
.leading-normal { line-height: 1.6; }
.leading-loose  { line-height: 1.8; }

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-brand     { color: var(--violet); }

/* Brand accent text (sparingly) */
.accent-text {
  color: var(--violet);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 4. Layout utilities                                                  */
/* ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.container-lg {
  width: 100%;
  max-width: var(--max-w-lg);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.container-prose {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

/* Flexbox */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }
.gap-12 { gap: var(--sp-12); }

/* Grid */
.grid         { display: grid; }
.grid-2       { grid-template-columns: repeat(2, 1fr); }
.grid-3       { grid-template-columns: repeat(3, 1fr); }
.grid-4       { grid-template-columns: repeat(4, 1fr); }
.auto-fit-280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.auto-fit-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.auto-fit-360 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* Spacing */
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }
.mb-16 { margin-bottom: var(--sp-16); }

.w-full   { width: 100%; }
.relative { position: relative; }
.hidden   { display: none; }

/* ------------------------------------------------------------------ */
/* 5. Section wrappers                                                  */
/* ------------------------------------------------------------------ */
.section    { padding: var(--sp-24) 0; }
.section-sm { padding: var(--sp-16) 0; }
.section-lg { padding: var(--sp-32) 0; }

/* Light sections */
.section-white  { background: var(--white); }
.section-subtle { background: #FAFAFA; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.section-soft   { background: var(--gray-50); }
.section-brand  { background: var(--violet-surface); }

/* Dark sections (CTA, footer only) */
.section-dark {
  background: var(--navy);
  color: var(--on-navy);
}
.section-navy-mid {
  background: var(--navy-mid);
  color: var(--on-navy);
}

/* Legacy aliases (preserve backward compat) */
.section-light        { background: var(--surface-0); color: var(--text-primary); }
.section-light-subtle { background: var(--surface-1); color: var(--text-primary); }

/* ------------------------------------------------------------------ */
/* 6. Section headings                                                  */
/* ------------------------------------------------------------------ */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
  background: transparent;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: var(--sp-4);
}

/* legacy alias */
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: var(--sp-3);
}
.section-label-dark { color: var(--violet-mid); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}

.section-subtitle {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 580px;
}

.section-header {
  max-width: 680px;
  margin-bottom: var(--sp-16);
}

.section-header-center {
  text-align: center;
  margin: 0 auto var(--sp-16);
}

.section-header-center .section-subtitle {
  margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* 7. Divider                                                           */
/* ------------------------------------------------------------------ */
.divider       { height: 1px; background: var(--border); border: none; }
.divider-dark  { background: var(--border-navy); }

/* ------------------------------------------------------------------ */
/* 8. Scrollbar                                                         */
/* ------------------------------------------------------------------ */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(124, 58, 237, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ------------------------------------------------------------------ */
/* 9. Focus ring                                                        */
/* ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: var(--r);
}

/* ------------------------------------------------------------------ */
/* 10. Responsive breakpoints                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --nav-h: 64px; }
  .section    { padding: var(--sp-20) 0; }
  .section-lg { padding: var(--sp-24) 0; }
  .section-title { font-size: var(--text-3xl); }
  .grid-4     { grid-template-columns: repeat(2, 1fr); }
  .grid-3     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .container  { padding: 0 var(--sp-4); }
  .section    { padding: var(--sp-16) 0; }
  .section-lg { padding: var(--sp-20) 0; }
  .section-title { font-size: var(--text-2xl); }
  .grid-2     { grid-template-columns: 1fr; }
  .grid-3     { grid-template-columns: 1fr; }
  .grid-4     { grid-template-columns: 1fr; }
  .auto-fit-280 { grid-template-columns: 1fr; }
  .auto-fit-320 { grid-template-columns: 1fr; }
  .auto-fit-360 { grid-template-columns: 1fr; }
}