/* =============================================================
   Braintrust Tutors — Color & Type Foundations
   Synced from Figma: "Braintrust Design System.fig" · Apr 2026
   ============================================================= */

/* ---------- Fonts ---------- */
/* Brand uses Poppins (no Campton). Confirmed from Figma — top fonts:
   Poppins Regular (3050×) · Medium (843×) · SemiBold (704×) · Bold (172×).
   We only have Light/Bold/Black/ExtraLight TTFs locally; browser font-weight
   matching maps Regular→Light, Medium/SemiBold→Bold. Supply the missing TTFs
   to complete the family. Fallback chain matches Figma's X1/X2 tokens. */
@font-face { font-family: 'Poppins'; font-weight: 200; font-style: normal;
  font-display: swap; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal;
  font-display: swap; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal;
  font-display: swap; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: normal;
  font-display: swap; src: url('fonts/Poppins-Black.ttf') format('truetype'); }

:root {
  /* ============================================================
     BRAND COLOR RAMPS — full 5/10/20…/100 ladders from Figma
     ============================================================ */

  /* BT Blue — logo, primary buttons, links */
  --bt-blue-5:   #FBFCFF;
  --bt-blue-10:  #F7F7FF;
  --bt-blue-20:  #D9DEFF;
  --bt-blue-30:  #B7C0FF;
  --bt-blue-40:  #909FFF;
  --bt-blue-50:  #6A7DFB;
  --bt-blue-60:  #4058F7;
  --bt-blue-70:  #4023FF;
  --bt-blue-80:  #3C00F7;   /* primary brand blue */
  --bt-blue-90:  #2800A6;
  --bt-blue-100: #1A006A;

  /* Spark Blue — SPARK product, highlight accents */
  --spark-blue-5:   #F7FDFF;
  --spark-blue-10:  #E4FAFF;
  --spark-blue-20:  #BDEDF9;
  --spark-blue-30:  #8FD8EA;
  --spark-blue-40:  #5AC2DC;
  --spark-blue-50:  #00B5E2;
  --spark-blue-60:  #0087A9;
  --spark-blue-70:  #005E75;
  --spark-blue-80:  #004050;
  --spark-blue-90:  #002933;
  --spark-blue-100: #00171C;

  /* Locker Orange — medium-priority / warm accent */
  --locker-orange-5:   #FFF8F3;
  --locker-orange-10:  #FFF1E7;
  --locker-orange-20:  #FFD7BC;
  --locker-orange-30:  #FFB17D;
  --locker-orange-40:  #FF8635;
  --locker-orange-50:  #FF6600;
  --locker-orange-60:  #BD4C00;
  --locker-orange-70:  #863600;
  --locker-orange-80:  #5C2500;
  --locker-orange-90:  #3B1800;
  --locker-orange-100: #240E00;

  /* Eraser Pink — joy, accent highlights */
  --eraser-pink-5:   #FFF8FC;
  --eraser-pink-10:  #FFE6F6;
  --eraser-pink-20:  #FFC8EB;
  --eraser-pink-30:  #FF9CDB;
  --eraser-pink-40:  #FA85D0;   /* canonical brand pink */
  --eraser-pink-50:  #FF49BE;
  --eraser-pink-60:  #F412A3;
  --eraser-pink-70:  #CE0084;
  --eraser-pink-80:  #8F005C;
  --eraser-pink-90:  #650041;
  --eraser-pink-100: #41002A;

  /* Chalkboard Green — growth, success */
  --chalkboard-green-5:   #ECFFF1;
  --chalkboard-green-10:  #DCFFE6;
  --chalkboard-green-20:  #C0F0CE;
  --chalkboard-green-30:  #6FDC8C;
  --chalkboard-green-40:  #55CB76;
  --chalkboard-green-50:  #00C063;
  --chalkboard-green-60:  #009E51;
  --chalkboard-green-70:  #1B8841;
  --chalkboard-green-80:  #00733C;
  --chalkboard-green-90:  #005029;
  --chalkboard-green-100: #00331A;

  /* Apple Red — high-priority / errors */
  --apple-red-5:   #FFF6F5;
  --apple-red-10:  #FFEAE9;
  --apple-red-20:  #FFCECC;
  --apple-red-30:  #FFA7A4;
  --apple-red-40:  #FF7B75;
  --apple-red-50:  #FF4D45;
  --apple-red-60:  #FF2C23;
  --apple-red-70:  #EE000D;
  --apple-red-80:  #801510;
  --apple-red-90:  #6B0400;
  --apple-red-100: #420300;

  /* Peechee Purple — muted background / nav surfaces */
  --peechee-purple-5:   #FAFAFE;
  --peechee-purple-10:  #F3F3F8;
  --peechee-purple-20:  #DCDBED;
  --peechee-purple-30:  #BFBDDA;
  --peechee-purple-40:  #ADA1C3;
  --peechee-purple-50:  #8D82A4;
  --peechee-purple-60:  #60607D;
  --peechee-purple-70:  #45455A;
  --peechee-purple-80:  #3B375E;
  --peechee-purple-90:  #22182B;
  --peechee-purple-100: #19111F;

  /* Ink — neutrals */
  --ink-5:   #F9F9F9;
  --ink-10:  #F2F2F2;
  --ink-20:  #E5E5E5;
  --ink-30:  #B2B2B2;
  --ink-40:  #999999;
  --ink-50:  #808080;
  --ink-60:  #666666;
  --ink-70:  #4D4D4D;
  --ink-80:  #333333;
  --ink-90:  #030303;
  --ink-100: #1A1A1A;
  --ink-0:   #FFFFFF;

  /* ============================================================
     LEGACY / ALIAS TOKENS (kept so existing UI kits don't break)
     ============================================================ */
  --bt-blue:    var(--bt-blue-80);
  --bt-cyan:    var(--spark-blue-50);
  --bt-green:   var(--chalkboard-green-50);
  --bt-pink:    var(--eraser-pink-40);
  --bt-yellow:  #feca13;        /* spark/aha mark only — not in Figma ramps */
  --bt-orange:  var(--locker-orange-50);
  --bt-red:     var(--apple-red-60);
  --bt-gray:    var(--ink-10);

  --ink-50-alias: var(--ink-50); /* legacy file referenced --ink-50 as gray */
  --ink-100-alias: var(--ink-10);
  --ink-200:    var(--ink-20);
  --ink-300:    var(--ink-30);
  --ink-400:    var(--ink-40);
  --ink-500:    var(--ink-60);
  --ink-700:    var(--ink-80);
  --ink-900:    #0a0a12;
  --ink-navy:   var(--peechee-purple-90);

  /* ============================================================
     SEMANTIC TOKENS (page-level usage, from Figma "Usage" labels)
     ============================================================ */
  --fg-1:       var(--ink-90);          /* primary text */
  --fg-2:       var(--ink-60);          /* secondary text */
  --fg-3:       var(--ink-50);          /* tertiary / labels / disabled */
  --fg-inverse: var(--ink-0);
  --fg-link:    var(--bt-blue-80);

  --bg-1:       var(--ink-0);           /* default page */
  --bg-2:       var(--ink-10);          /* subtle surface */
  --bg-3:       var(--peechee-purple-10); /* default page bg in app */
  --bg-nav:     var(--peechee-purple-20); /* navigation rest */
  --bg-nav-hover: var(--peechee-purple-30);
  --bg-nav-active: var(--bt-blue-80);
  --bg-hero:    var(--bt-blue-80);
  --bg-brand:   var(--bt-yellow);
  --bg-dark:    var(--peechee-purple-90);

  /* Field / form */
  --field-bg:        var(--ink-0);
  --field-border:    var(--ink-20);
  --field-border-hover: var(--ink-30);
  --field-border-focus: var(--bt-blue-80);
  --field-disabled-bg: var(--ink-10);
  --field-disabled-text: var(--ink-30);

  /* Status */
  --status-error-bg:    var(--apple-red-10);
  --status-error-fg:    var(--apple-red-70);
  --status-success-bg:  var(--chalkboard-green-10);
  --status-success-fg:  var(--chalkboard-green-70);
  --status-warning-bg:  var(--locker-orange-10);
  --status-warning-fg:  var(--locker-orange-60);
  --status-info-bg:     var(--spark-blue-10);
  --status-info-fg:     var(--spark-blue-70);

  /* Borders */
  --border-1:   var(--ink-20);
  --border-2:   var(--ink-30);

  /* ============================================================
     TYPE — font families (matches Figma token names)
     ============================================================ */
  --ad-sys-font-family-X1: 'Poppins', 'Inter', system-ui, -apple-system, sans-serif;
  --ad-sys-font-family-X2: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --font-display: var(--ad-sys-font-family-X1);
  --font-body:    var(--ad-sys-font-family-X1);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     TYPE WEIGHTS (Figma: ad-sys-type-weight-*)
     ============================================================ */
  --ad-sys-type-weight-regular:  400;
  --ad-sys-type-weight-medium:   500;
  --ad-sys-type-weight-semibold: 600;
  --ad-sys-type-weight-bold:     700;
  /* Brand display occasionally uses 900 for marketing only */
  --ad-sys-type-weight-black:    900;

  /* ============================================================
     TYPE LINE HEIGHTS (Figma: ad-sys-type-line-height-*)
     ============================================================ */
  --ad-sys-type-line-height-1:  1rem;     /* 16px */
  --ad-sys-type-line-height-2:  1.25rem;  /* 20px */
  --ad-sys-type-line-height-3:  1.5rem;   /* 24px */
  --ad-sys-type-line-height-4:  1.75rem;  /* 28px */
  --ad-sys-type-line-height-5:  2rem;     /* 32px */
  --ad-sys-type-line-height-6:  2.5rem;   /* 40px */
  --ad-sys-type-line-height-7:  3rem;     /* 48px */

  /* ============================================================
     TYPE SCALE (Figma: ad-sys-typescale-*)
     One scale, app-wide. Pair each with the recommended weight + LH.
     ============================================================ */
  --ad-sys-typescale-75:   0.75rem;   /* 12px · meta · weight 400 · lh 1rem */
  --ad-sys-typescale-100:  0.875rem;  /* 14px · body small · weight 400 · lh 1.5rem */
  --ad-sys-typescale-200:  1rem;      /* 16px · body default · weight 400 · lh 1.5rem */
  --ad-sys-typescale-300:  1.125rem;  /* 18px · h6 · weight 600 · lh 1.75rem */
  --ad-sys-typescale-400:  1.25rem;   /* 20px · h5 · weight 600 · lh 1.75rem */
  --ad-sys-typescale-500:  1.5rem;    /* 24px · h4 · weight 600 · lh 2rem */
  --ad-sys-typescale-600:  2rem;      /* 32px · h3 · weight 600 · lh 2.5rem */
  --ad-sys-typescale-700:  2.5rem;    /* 40px · h2 · weight 600 · lh 2.5rem */
  --ad-sys-typescale-800:  3rem;      /* 48px · h1 · weight 600 · lh 3rem */
  --ad-sys-typescale-900:  3.5rem;    /* 56px · display small · weight 600 · lh 3.5rem */
  --ad-sys-typescale-1000: 4rem;      /* 64px · display medium · weight 600 · lh 4rem */
  --ad-sys-typescale-1100: 5rem;      /* 80px · display large · weight 600 · lh 5rem */

  /* Marketing hero — outside of app type ramp, used on braintrusttutors.com */
  --fs-hero-marketing: clamp(56px, 7.5vw, 104px);

  /* Convenience aliases (still used by existing UI kits) */
  --fs-hero:    var(--ad-sys-typescale-1000);
  --fs-display: var(--ad-sys-typescale-900);
  --fs-h1:      var(--ad-sys-typescale-800);
  --fs-h2:      var(--ad-sys-typescale-700);
  --fs-h3:      var(--ad-sys-typescale-600);
  --fs-h4:      var(--ad-sys-typescale-500);
  --fs-body:    var(--ad-sys-typescale-200);
  --fs-small:   var(--ad-sys-typescale-100);
  --fs-caption: var(--ad-sys-typescale-75);
  --fs-eyebrow: 13px;

  --lh-tight:   0.95;
  --lh-snug:    1.15;
  --lh-normal:  1.5;
  --lh-loose:   1.6;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-wide:    0.04em;

  /* ============================================================
     LINKS (Figma: ad-sys-link-*)
     ============================================================ */
  --link-default-size:       1rem;     /* paired w/ body default */
  --link-default-weight:     300;      /* light per Figma */
  --link-small-size:         0.875rem; /* paired w/ body small */
  --link-small-weight:       300;
  --link-default-high-weight: 600;
  --link-small-high-weight:   600;

  /* ============================================================
     SHAPE
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-btn:  32px;   /* Figma button radius (primary/secondary small) */
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION
     ============================================================ */
  --shadow-sm:  0 1px 2px rgba(3, 3, 3, 0.06), 0 1px 1px rgba(3, 3, 3, 0.04);
  --shadow-md:  0 4px 12px rgba(3, 3, 3, 0.06), 0 2px 4px rgba(3, 3, 3, 0.04);
  --shadow-lg:  0 18px 40px rgba(3, 3, 3, 0.10), 0 4px 10px rgba(3, 3, 3, 0.05);
  --shadow-pop: 0 24px 60px rgba(60, 0, 247, 0.18);

  /* ============================================================
     SPACING (4pt grid)
     ============================================================ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  140ms;
  --dur-med:   220ms;
  --dur-slow:  420ms;
}

/* ============ SEMANTIC ELEMENT STYLES ============ */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  font-size:   var(--ad-sys-typescale-200);
  line-height: var(--ad-sys-type-line-height-3);
  color:       var(--fg-1);
  background:  var(--bg-1);
  font-weight: var(--ad-sys-type-weight-regular);
}

/* App-style headings — semibold (600) per Figma type ramp */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--ad-sys-type-weight-semibold);
  font-size:   var(--ad-sys-typescale-800);
  line-height: var(--ad-sys-type-line-height-7);
  letter-spacing: var(--ls-tight);
  color: inherit;
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--ad-sys-type-weight-semibold);
  font-size:   var(--ad-sys-typescale-700);
  line-height: var(--ad-sys-type-line-height-6);
  letter-spacing: var(--ls-snug);
  color: inherit;
  text-wrap: balance;
  margin: 0 0 var(--sp-3);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--ad-sys-type-weight-semibold);
  font-size:   var(--ad-sys-typescale-600);
  line-height: var(--ad-sys-type-line-height-6);
  color: inherit;
  margin: 0 0 var(--sp-2);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--ad-sys-type-weight-semibold);
  font-size:   var(--ad-sys-typescale-500);
  line-height: var(--ad-sys-type-line-height-5);
  color: inherit;
  margin: 0 0 var(--sp-2);
}

h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--ad-sys-type-weight-semibold);
  font-size:   var(--ad-sys-typescale-400);
  line-height: var(--ad-sys-type-line-height-4);
  color: inherit;
  margin: 0 0 var(--sp-2);
}

h6, .h6 {
  font-family: var(--font-display);
  font-weight: var(--ad-sys-type-weight-semibold);
  font-size:   var(--ad-sys-typescale-300);
  line-height: var(--ad-sys-type-line-height-4);
  color: inherit;
  margin: 0 0 var(--sp-2);
}

/* Marketing-only hero (Black/900) — explicit class, not a default */
.hero-display {
  font-family: var(--font-display);
  font-weight: var(--ad-sys-type-weight-black);
  font-size:   var(--fs-hero-marketing);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

p {
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
  color: var(--fg-1);
}

.body-small { font-size: var(--ad-sys-typescale-100); line-height: var(--ad-sys-type-line-height-3); }
.meta       { font-size: var(--ad-sys-typescale-75);  line-height: var(--ad-sys-type-line-height-1); color: var(--fg-2); }

.eyebrow,
.kicker {
  font-family: var(--font-display);
  font-weight: var(--ad-sys-type-weight-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}

.lowercase-wordmark {
  font-family: var(--font-display);
  font-weight: var(--ad-sys-type-weight-black);
  text-transform: lowercase;
  letter-spacing: -0.02em;
}

small, .small { font-size: var(--ad-sys-typescale-100); }
.caption { font-size: var(--ad-sys-typescale-75); color: var(--fg-2); }

/* Links — Figma: ad-sys-link-default · weight 300, no border by default */
a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--link-default-weight);
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.72; }
a.high-emphasis { font-weight: var(--link-default-high-weight); }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.95em; }

/* Utility color classes for swatch previews */
.sw-blue       { background: var(--bt-blue-80);          color: white; }
.sw-cyan       { background: var(--spark-blue-50);       color: white; }
.sw-green      { background: var(--chalkboard-green-50); color: white; }
.sw-gray       { background: var(--ink-10);              color: var(--ink-90); }
.sw-pink       { background: var(--eraser-pink-40);      color: var(--ink-90); }
.sw-yellow     { background: var(--bt-yellow);           color: var(--ink-90); }
.sw-orange     { background: var(--locker-orange-50);    color: white; }
.sw-red        { background: var(--apple-red-60);        color: white; }
.sw-purple     { background: var(--peechee-purple-50);   color: white; }