/* =========================================================================
   B2X Marketing — Colors & Type
   Source of truth for CSS vars. Import this before any other stylesheet.
   ========================================================================= */

/* Fonts: Poppins (display/heading) — self-hosted brand files in fonts/
          Work Sans (body) — variable TTF, self-hosted
          Gotham Rounded is used ONLY for the logo wordmark. Not bundled
          (license); Poppins 300 is the closest free substitute.
   ========================================================================= */

/* ---- Fonts: Poppins (heading) + Work Sans (body) via Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* ---------------------------------------------------------------
     Brand anchors — the non-negotiable two
     --------------------------------------------------------------- */
  --b2x-black: #2D2926;
  --b2x-orange: #FE5000;
  --b2x-white: #FFFFFF;

  /* ---------------------------------------------------------------
     Primary Orange scale (energy / CTAs / emphasis)
     Base = 500 = #FE5001 (≈ brand orange). Text-safe 600+.
     --------------------------------------------------------------- */
  --orange-50:  #FFEEE6;
  --orange-100: #FFDCCE;
  --orange-200: #FFB79F;
  --orange-300: #FF8B66;
  --orange-400: #F25924;
  --orange-500: #FE5001;
  --orange-600: #DC3900;
  --orange-700: #B82900;
  --orange-800: #660000;
  --orange-900: #3D0000;

  /* ---------------------------------------------------------------
     Secondary Teal (trust / expertise)
     +150° split-complementary from orange. Text-safe 500+.
     --------------------------------------------------------------- */
  --teal-50:  #EBF9F7;
  --teal-100: #D6EEEB;
  --teal-200: #ADD8D3;
  --teal-300: #7CC0B9;
  --teal-400: #45A49C;
  --teal-500: #007B73;
  --teal-600: #00635C;
  --teal-700: #004B45;
  --teal-800: #003834;
  --teal-900: #001D1A;

  /* ---------------------------------------------------------------
     Accent Blue (intelligence / AI pillar)
     +202° from orange. Text-safe 500+.
     --------------------------------------------------------------- */
  --blue-50:  #E9F7FF;
  --blue-100: #D4ECFD;
  --blue-200: #A9D4F3;
  --blue-300: #75BAE9;
  --blue-400: #3A9BD7;
  --blue-500: #0064A3;
  --blue-600: #004D87;
  --blue-700: #003668;
  --blue-800: #003159;
  --blue-900: #001835;

  /* ---------------------------------------------------------------
     Warm-tinted neutrals (derived from orange hue family, minimal chroma)
     Neutral 800 ≈ brand black. Text-safe 500+.
     --------------------------------------------------------------- */
  --neutral-50:  #FAF6F4;
  --neutral-100: #F0EAE7;
  --neutral-200: #DBD2CE;
  --neutral-300: #C0B5B0;
  --neutral-400: #A2958F;
  --neutral-500: #7C6E68;
  --neutral-600: #5E524D;
  --neutral-700: #473D39;
  --neutral-800: #2E2724;
  --neutral-900: #15110F;

  /* ---------------------------------------------------------------
     Semantic (UI state)
     Error shifted cooler (H=25°) to stay distinct from brand orange (H=38°).
     --------------------------------------------------------------- */
  --success:       #38853E;
  --success-light: #DEEDDD;
  --warning:       #B98600;
  --warning-light: #F1E7D2;
  --warning-text:  #825C00;
  --error:         #C53637;
  --error-light:   #FFDFDC;
  --info:          #3179A6;
  --info-light:    #DCEAF4;

  /* ---------------------------------------------------------------
     Semantic aliases — use these in components
     --------------------------------------------------------------- */
  --bg:            var(--neutral-50);           /* page canvas */
  --bg-elev:       var(--b2x-white);            /* raised surface (card) */
  --bg-dark:       var(--b2x-black);            /* dark authority bg */
  --bg-feature:    var(--teal-700);             /* teal feature bg — flat teal-700 */
  --bg-feature-accent: var(--teal-500);         /* teal as highlight only — charts, badges, links */
  --bg-subtle:     var(--neutral-100);          /* subtle tint (section) */

  --fg:            var(--b2x-black);            /* primary text */
  --fg-muted:      var(--neutral-600);          /* body text */
  --fg-subtle:     var(--neutral-500);          /* captions / meta */
  --fg-faint:      var(--neutral-400);          /* de-emphasized */

  /* ---------------------------------------------------------------
     Rule: on ANY dark background (teal-700, black, feature band),
     primary text is pure brand white. Muted text uses the
     _300 shade of the surrounding hue (teal-100/200 on teal, etc.).
     Accent colors lighten to the _300 step for adequate contrast.
     --------------------------------------------------------------- */
  --fg-on-dark:        var(--b2x-white);        /* ALWAYS white on dark */
  --fg-on-dark-muted:  var(--teal-200);         /* muted body text on teal dark */
  --fg-on-black-muted: var(--neutral-200);      /* muted body text on black */
  --accent-on-dark:    var(--orange-300);       /* orange lifts to 300 on dark */
  --teal-on-dark:      var(--teal-300);         /* teal accents lift to 300 on dark */
  --blue-on-dark:      var(--blue-300);         /* blue accents lift to 300 on dark */

  --accent:        var(--b2x-orange);
  --accent-hover:  var(--orange-600);
  --accent-press:  var(--orange-700);

  --border:        var(--neutral-200);
  --border-strong: var(--b2x-black);
  --border-subtle: var(--neutral-100);

  --link:          var(--blue-500);
  --link-hover:    var(--blue-600);

  /* ---------------------------------------------------------------
     Typography — families
     --------------------------------------------------------------- */
  --font-logo:     'Gotham Rounded', 'Poppins', sans-serif; /* logo wordmark ONLY */
  --font-display:  'Poppins', system-ui, sans-serif;
  --font-heading:  'Poppins', system-ui, sans-serif;
  --font-body:     'Work Sans', system-ui, sans-serif;
  --font-ui:       'Work Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------------------------------------------------------------
     Typography — weights
     --------------------------------------------------------------- */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ---------------------------------------------------------------
     Type scale (fluid)
     H2 / section titles use UPPERCASE + 0.02em tracking.
     Eyebrows use UPPERCASE + 0.2em tracking.
     --------------------------------------------------------------- */
  --fs-eyebrow:  1rem;
  --fs-caption:  0.875rem;
  --fs-body:     1rem;
  --fs-body-lg:  1.125rem;
  --fs-h6:       1rem;
  --fs-h5:       1.125rem;
  --fs-h4:       1.375rem;
  --fs-h3:       1.75rem;
  --fs-h2:       clamp(2rem, 4vw, 2.8rem);
  --fs-h1:       clamp(2.5rem, 5vw, 4rem);
  --fs-display:  clamp(3.25rem, 7vw, 6rem);

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;

  /* ---------------------------------------------------------------
     Spacing (8px base, opinionated scale)
     --------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------------------------------------------------------------
     Radii — geometric base, pill for CTAs.
     Primary buttons use pill (999). Cards 4–8px. Keep it consistent.
     --------------------------------------------------------------- */
  --radius-0:   0;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------
     Elevation — restrained. Hard edges > soft drop shadows.
     --------------------------------------------------------------- */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(45, 41, 38, 0.08);
  --shadow-2:  0 4px 12px rgba(45, 41, 38, 0.08);
  --shadow-3:  0 12px 28px rgba(45, 41, 38, 0.12);
  --shadow-orange: 0 8px 24px rgba(254, 80, 0, 0.24);

  /* ---------------------------------------------------------------
     Grid — 7-column presentation grid (brand standard)
     + 12-column web grid
     --------------------------------------------------------------- */
  --grid-slide-cols: 7;
  --grid-web-cols:   12;
  --container-max:   1280px;
  --container-pad:   clamp(16px, 4vw, 64px);

  /* ---------------------------------------------------------------
     Motion — fast, precise, no bounce. Geometry doesn't wobble.
     --------------------------------------------------------------- */
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-std:   200ms;
  --dur-slow:  360ms;
}

/* =========================================================================
   Base element styling — opt in by including this file.
   ========================================================================= */
html { font-size: 16px; }

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

/* Headings — all Poppins. H1 is the display workhorse. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--fg);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
}

/* H2 / section title: UPPERCASE, light weight for brand feel. */
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--w-light);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--w-semibold);
  letter-spacing: -0.005em;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
}

h5 {
  font-size: var(--fs-h5);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
}

h6 {
  font-size: var(--fs-h6);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
}

p {
  margin: 0;
  color: var(--fg-muted);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
  line-height: var(--lh-normal);
}

/* Utility classes the design system relies on */
.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--b2x-orange);
  display: inline-block;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--w-bold);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* Selection matches brand */
::selection {
  background: var(--b2x-orange);
  color: var(--b2x-white);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-std);
}
a:hover { color: var(--link-hover); }