/* =========================================================================
   DirectLine Talent — Colors & Type
   Foundational tokens. Mirrors the live site at directlinetalent.com.
   ========================================================================= */

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

:root {
  /* ============================ COLOR ============================ */

  /* Surface — dark by default, cream for "light bands" between sections */
  --dl-bg:           #0B0F1A;   /* page bg, hero, CTA, footer */
  --dl-bg-2:         #11172A;   /* one notch up — section dividers, cards */
  --dl-bg-3:         #1A2238;   /* card bg on dark, hover surface */
  --dl-bg-4:         #232C46;   /* inputs, raised chip on dark */

  --dl-cream:        #F6F2EA;   /* light section background */
  --dl-cream-2:      #EFEAE0;
  --dl-white:        #FFFFFF;

  /* Lines */
  --dl-line-dark:    rgba(255, 255, 255, 0.08);
  --dl-line-dark-2:  rgba(255, 255, 255, 0.14);
  --dl-line-light:   #E4DED2;
  --dl-line-light-2: #D4CCB8;

  /* Brand — Amber/Orange. The single accent that carries the brand. */
  --dl-amber-600:    #E08A14;
  --dl-amber-500:    #F5A623;   /* primary brand accent */
  --dl-amber-400:    #F8B947;
  --dl-amber-300:    #FBCB7A;
  --dl-amber-100:    #FBE9C2;
  --dl-amber-glow:   rgba(245, 166, 35, 0.18);

  /* Foreground — on dark */
  --dl-fg:           #FFFFFF;
  --dl-fg-2:         #B6BCCB;   /* secondary body on dark */
  --dl-fg-3:         #7E869B;   /* tertiary / meta on dark */
  --dl-fg-4:         #5B6379;   /* labels, "across all role levels" */

  /* Foreground — on light */
  --dl-fg-on-light:    #0B0F1A;
  --dl-fg-on-light-2:  #3F465A;
  --dl-fg-on-light-3:  #6E7589;

  /* Semantic */
  --dl-success:      #36C28A;
  --dl-warn:         #F5A623;
  --dl-danger:       #E55A4A;
  --dl-info:         #5AA9E6;

  /* ============================ TYPE ============================ */

  --dl-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dl-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Display — heavy, tight tracking, white on dark; orange for the keyword */
  --dl-display-1:    800 64px/1.05 var(--dl-font-sans);
  --dl-display-2:    700 48px/1.08 var(--dl-font-sans);
  --dl-display-3:    700 36px/1.15 var(--dl-font-sans);

  /* Headings */
  --dl-h1:           700 32px/1.2  var(--dl-font-sans);
  --dl-h2:           700 24px/1.25 var(--dl-font-sans);
  --dl-h3:           600 18px/1.3  var(--dl-font-sans);
  --dl-h4:           600 16px/1.35 var(--dl-font-sans);

  --dl-eyebrow:      600 12px/1   var(--dl-font-sans);

  /* Body */
  --dl-body-lg:      400 18px/1.55 var(--dl-font-sans);
  --dl-body:         400 16px/1.55 var(--dl-font-sans);
  --dl-body-sm:      400 14px/1.5  var(--dl-font-sans);
  --dl-meta:         500 12px/1.4  var(--dl-font-sans);
  --dl-mono-sm:      500 13px/1.5  var(--dl-font-mono);

  /* Stat numbers — used in hero stat cards */
  --dl-stat:         700 28px/1.1  var(--dl-font-sans);
  --dl-stat-lg:      700 36px/1.1  var(--dl-font-sans);

  /* ============================ SPACE / SHAPE ============================ */
  --dl-r-sm:   6px;
  --dl-r-md:   10px;
  --dl-r-lg:   14px;
  --dl-r-xl:   20px;
  --dl-r-pill: 999px;

  --dl-s-1: 4px;  --dl-s-2: 8px;  --dl-s-3: 12px;
  --dl-s-4: 16px; --dl-s-5: 24px; --dl-s-6: 32px;
  --dl-s-7: 48px; --dl-s-8: 64px; --dl-s-9: 96px;

  /* Shadows — quiet on dark, soft on light */
  --dl-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --dl-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.35);
  --dl-shadow-3: 0 24px 60px rgba(0, 0, 0, 0.45);
  --dl-shadow-light-2: 0 4px 14px rgba(20, 22, 30, 0.06);
  --dl-shadow-amber:   0 8px 24px rgba(245, 166, 35, 0.25);

  --dl-ring-amber: 0 0 0 3px rgba(245, 166, 35, 0.35);
  --dl-ring-focus: 0 0 0 3px rgba(245, 166, 35, 0.5);

  /* Motion */
  --dl-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --dl-dur-fast: 140ms;
  --dl-dur:      220ms;
  --dl-dur-slow: 360ms;
}

/* ============================ SEMANTIC SHORTHAND ============================ */

.dl-display-1 { font: var(--dl-display-1); letter-spacing: -0.025em; color: var(--dl-fg); }
.dl-display-2 { font: var(--dl-display-2); letter-spacing: -0.022em; color: var(--dl-fg); }
.dl-display-3 { font: var(--dl-display-3); letter-spacing: -0.02em;  color: var(--dl-fg); }
.dl-h1        { font: var(--dl-h1); letter-spacing: -0.015em; color: var(--dl-fg); }
.dl-h2        { font: var(--dl-h2); letter-spacing: -0.01em;  color: var(--dl-fg); }
.dl-h3        { font: var(--dl-h3); color: var(--dl-fg); }
.dl-h4        { font: var(--dl-h4); color: var(--dl-fg); }
.dl-eyebrow   {
  font: var(--dl-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dl-amber-500);
}
.dl-body-lg { font: var(--dl-body-lg); color: var(--dl-fg-2); }
.dl-body    { font: var(--dl-body);    color: var(--dl-fg-2); }
.dl-body-sm { font: var(--dl-body-sm); color: var(--dl-fg-3); }
.dl-meta    { font: var(--dl-meta);    color: var(--dl-fg-4); letter-spacing: 0.02em; }
.dl-mono    { font: var(--dl-mono-sm); color: var(--dl-fg-3); }

/* The brand keyword — orange-on-dark, used inside displays */
.dl-keyword { color: var(--dl-amber-500); }

/* "On light" overrides for use inside cream sections */
.dl-on-light .dl-display-1,
.dl-on-light .dl-display-2,
.dl-on-light .dl-display-3,
.dl-on-light .dl-h1,
.dl-on-light .dl-h2,
.dl-on-light .dl-h3,
.dl-on-light .dl-h4 { color: var(--dl-fg-on-light); }
.dl-on-light .dl-body-lg,
.dl-on-light .dl-body { color: var(--dl-fg-on-light-2); }
.dl-on-light .dl-body-sm,
.dl-on-light .dl-meta { color: var(--dl-fg-on-light-3); }