/* ─────────────────────────────────────────────────────────────────
   BRIGHTBEAM DESIGN SYSTEM – colors + type foundation
   Import this file as the first stylesheet in any Brightbeam artifact.
   ───────────────────────────────────────────────────────────────── */

/* ============== Fonts ============== */

/* Primary source: Google Fonts CDN – always reachable, no asset-serving
   gotchas. Zalando Sans local TTFs in /fonts/ are kept for offline / PPTX
   export. Exo (the data/label face) loads via the CDN import only  – 
   restricted to four weights: ExtraLight 200, Light 300, Regular 400, Medium 500. */

@font-face {
  font-family: "Zalando Sans Local";
  src: url("./fonts/ZalandoSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zalando Sans Local";
  src: url("./fonts/ZalandoSans-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

/* ============== Tokens ============== */

:root {
  /* ----- Primary brand colors ----- */
  --bb-ember-red:    #EA4700;   /* primary signal, headlines, CTAs */
  --bb-amber-beam:   #FF9900;   /* warm gradient mid, headings on dark */
  --bb-charcoal:     #282829;   /* primary dark surface, body type on light */

  /* ----- Secondary brand colors ----- */
  --bb-corona-glow:  #F57000;   /* soft cream highlight, subdued panels */
  --bb-helios-yellow:#FCBF00;   /* accent / chart fill */
  --bb-ash:          #F2F5FA;   /* cool light neutral / muted surface */

  /* ----- Extended neutrals ----- */
  --bb-rich-black:   #0A0A0A;   /* full black for type on pure white */
  --bb-white:        #FFFFFF;
  --bb-charcoal-700: #3C3C3D;
  --bb-charcoal-500: #717070;
  --bb-charcoal-300: #B5B5B6;
  --bb-line:         #4D4D4D;   /* hairline on dark surfaces */
  --bb-line-light:   #E1E4EA;   /* hairline on light surfaces */

  /* ----- Signature gradient ----- */
  --bb-grad-ember:   linear-gradient(180deg, #EA4700 0%, #FF9900 100%);  /* @kind color */
  --bb-grad-ember-h: linear-gradient(90deg,  #EA4700 0%, #FF9900 100%);  /* @kind color */
  --bb-grad-ember-d: linear-gradient(135deg, #EA4700 0%, #FF9900 100%);  /* @kind color */

  /* ----- Semantic surfaces ----- */
  --bb-bg:           var(--bb-white);
  --bb-bg-dark:      var(--bb-charcoal);
  --bb-bg-muted:     var(--bb-ash);
  --bb-fg:           var(--bb-charcoal);
  --bb-fg-muted:     var(--bb-charcoal-500);
  --bb-fg-on-dark:   var(--bb-white);
  --bb-fg-muted-on-dark: rgba(255,255,255,0.66);
  --bb-link:         var(--bb-ember-red);
  --bb-link-on-dark: var(--bb-amber-beam);

  /* ----- Type families ----- */
  --bb-font-sans:    "Zalando Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bb-font-mono:    "Exo", ui-monospace, "SFMono-Regular", Menlo, monospace;  /* data/label face – weights 200/300/400/500 only; charts, diagrams, captions */

  /* ----- Type scale (px) ----- */
  --bb-fs-display:   98px;   /* hero / "How can we help?" */
  --bb-fs-h1:        50px;   /* section banners (all-caps allowed) */
  --bb-fs-h2:        40px;   /* sub-section headlines */
  --bb-fs-h3:        30px;   /* card titles */
  --bb-fs-lede:      24px;   /* lede paragraphs, big body */
  --bb-fs-body:      18px;   /* default body */
  --bb-fs-small:     16px;
  --bb-fs-eyebrow:   14px;   /* uppercase labels */
  --bb-fs-micro:     12px;   /* mono captions, chart labels */

  /* ----- Line heights ----- */
  --bb-lh-tight:     1.04;   /* @kind font */
  --bb-lh-snug:      1.10;   /* @kind font */
  --bb-lh-normal:    1.30;   /* @kind font */
  --bb-lh-relaxed:   1.55;   /* @kind font */

  /* ----- Weights ----- */
  --bb-fw-light:     300;    /* @kind font */
  --bb-fw-regular:   400;    /* @kind font */
  --bb-fw-medium:    500;    /* @kind font */
  --bb-fw-semibold:  600;    /* @kind font */
  --bb-fw-bold:      700;    /* @kind font */

  /* ----- Letter spacing ----- */
  --bb-ls-eyebrow:   0.10em;  /* uppercase labels @kind font */
  --bb-ls-headline:  -0.01em;  /* @kind font */
  --bb-ls-display:   -0.02em;  /* @kind font */

  /* ----- Spacing scale ----- */
  --bb-space-1:      4px;
  --bb-space-2:      8px;
  --bb-space-3:      12px;
  --bb-space-4:      16px;
  --bb-space-5:      24px;
  --bb-space-6:      32px;
  --bb-space-7:      48px;
  --bb-space-8:      64px;
  --bb-space-9:      96px;
  --bb-space-10:     128px;

  /* ----- Radii ----- */
  --bb-radius-sm:    6px;
  --bb-radius-md:    12px;
  --bb-radius-lg:    19px;   /* canonical card radius from Figma */
  --bb-radius-xl:    28px;
  --bb-radius-pill:  999px;

  /* ----- Shadows ----- */
  --bb-shadow-card:    -13px 13px 33px 0 rgba(0,0,0,0.13);
  --bb-shadow-soft:    0 4px 24px 0 rgba(0,0,0,0.07);
  --bb-shadow-deep:    0 24px 60px 0 rgba(0,0,0,0.22);
  --bb-shadow-press:   0 1px 0 0 rgba(0,0,0,0.25) inset;

  /* ----- Motion ----- */
  --bb-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --bb-ease-in-out:  cubic-bezier(0.83, 0, 0.17, 1);  /* @kind other */
  --bb-dur-fast:     140ms;  /* @kind other */
  --bb-dur-base:     220ms;  /* @kind other */
  --bb-dur-slow:     420ms;  /* @kind other */
}

/* ============== Base type ============== */

html {
  font-family: var(--bb-font-sans);
  font-weight: var(--bb-fw-regular);
  font-size: var(--bb-fs-body);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-fg);
  background: var(--bb-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "kern";
  font-stretch: 100%;            /* never extended; condensed only when noted */
}

body { margin: 0; }

.bb-display, .bb-h1, .bb-h2, .bb-h3, .bb-h4 {
  font-family: var(--bb-font-sans);
  margin: 0;
  text-wrap: balance;
}

.bb-display {
  font-size: var(--bb-fs-display);
  line-height: var(--bb-lh-tight);
  font-weight: var(--bb-fw-light);   /* huge text = light weight */
  letter-spacing: var(--bb-ls-display);
}

.bb-h1 {
  font-size: var(--bb-fs-h1);
  line-height: var(--bb-lh-snug);
  font-weight: var(--bb-fw-bold);
  letter-spacing: var(--bb-ls-headline);
  text-transform: uppercase;          /* H1 is the brand's "section banner" */
}

.bb-h2 {
  font-size: var(--bb-fs-h2);
  line-height: var(--bb-lh-snug);
  font-weight: var(--bb-fw-medium);
  letter-spacing: var(--bb-ls-headline);
}

.bb-h3 {
  font-size: var(--bb-fs-h3);
  line-height: var(--bb-lh-snug);
  font-weight: var(--bb-fw-medium);
}

.bb-h4 {
  font-size: var(--bb-fs-lede);
  line-height: var(--bb-lh-normal);
  font-weight: var(--bb-fw-light);    /* big-feel paragraphs */
}

.bb-lede {
  font-size: var(--bb-fs-lede);
  line-height: var(--bb-lh-normal);
  font-weight: var(--bb-fw-light);
  color: var(--bb-fg);
}

.bb-body {
  font-size: var(--bb-fs-body);
  line-height: var(--bb-lh-relaxed);
  color: var(--bb-fg);
}

.bb-small {
  font-size: var(--bb-fs-small);
  line-height: var(--bb-lh-relaxed);
}

.bb-eyebrow {
  font-size: var(--bb-fs-eyebrow);
  line-height: 1.2;
  font-weight: var(--bb-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-eyebrow);
  color: var(--bb-amber-beam);
}

.bb-mono {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-fs-micro);
  letter-spacing: 0;
}

/* On-dark variants */
.bb-on-dark { color: var(--bb-white); }
.bb-on-dark .bb-eyebrow { color: var(--bb-amber-beam); }
.bb-on-dark a { color: var(--bb-amber-beam); }

a {
  color: var(--bb-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--bb-dur-fast) var(--bb-ease-out);
}
a:hover { opacity: 0.72; }

::selection {
  background: var(--bb-ember-red);
  color: var(--bb-white);
}