/* =====================================================================
   BABER LEARNING — Core design tokens
   Colors + type foundations, plus semantic element styles.
   Every rule here is derived from the brand assets in /assets.
   ===================================================================== */

/* ---------- Brand font faces (self-hosted) ---------- */
@font-face { font-family:'Poppins'; font-weight:100; font-style:normal; src:url('fonts/Poppins-Thin.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:100; font-style:italic; src:url('fonts/Poppins-ThinItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:200; font-style:normal; src:url('fonts/Poppins-ExtraLight.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:200; font-style:italic; src:url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:300; font-style:normal; src:url('fonts/Poppins-Light.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:300; font-style:italic; src:url('fonts/Poppins-LightItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; src:url('fonts/Poppins-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:400; font-style:italic; src:url('fonts/Poppins-Italic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:500; font-style:normal; src:url('fonts/Poppins-Medium.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:500; font-style:italic; src:url('fonts/Poppins-MediumItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; src:url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:600; font-style:italic; src:url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; src:url('fonts/Poppins-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:700; font-style:italic; src:url('fonts/Poppins-BoldItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:800; font-style:normal; src:url('fonts/Poppins-ExtraBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:800; font-style:italic; src:url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:900; font-style:normal; src:url('fonts/Poppins-Black.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Poppins'; font-weight:900; font-style:italic; src:url('fonts/Poppins-BlackItalic.ttf') format('truetype'); font-display:swap; }

@font-face { font-family:'Bebas Neue'; font-weight:100; font-style:normal; src:url('fonts/BebasNeueThin-4B3mY.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Bebas Neue'; font-weight:300; font-style:normal; src:url('fonts/BebasNeueLight-L3ajy.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Bebas Neue'; font-weight:400; font-style:normal; src:url('fonts/BebasNeueBook-d9A1l.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Bebas Neue'; font-weight:500; font-style:normal; src:url('fonts/BebasNeueRegular-gxj83.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Bebas Neue'; font-weight:700; font-style:normal; src:url('fonts/BebasNeueBold-7B9LE.ttf') format('truetype'); font-display:swap; }

:root {
  /* ---------- Brand core ---------- */
  --bl-indigo:        #1D0060;   /* wordmark / primary text on light  */
  --bl-indigo-deep:   #180060;   /* tightest violet, used in badges    */
  --bl-violet:        #382078;   /* IA badge fill                      */
  --bl-blue:          #516CED;   /* mid of logo gradient               */
  --bl-blue-bright:   #4A99F1;   /* upper-mid of logo gradient         */
  --bl-cyan:          #46B5F3;   /* top of logo gradient               */
  --bl-purple:        #5650EA;   /* lower logo gradient                */
  --bl-purple-deep:   #5828E0;   /* deepest accent purple              */

  /* ---------- Soft/pastel tints (backgrounds, glows, frame strokes) ---------- */
  --bl-cyan-50:       #CDECFB;
  --bl-cyan-100:      #B2DEFA;
  --bl-lavender-50:   #E4E2FA;
  --bl-lavender-100:  #D1C8F3;
  --bl-purple-50:     #EADCF8;
  --bl-purple-100:    #D7BFF0;

  /* ---------- Signature gradients ---------- */
  --bl-grad-logo:     linear-gradient(135deg, #46B5F3 0%, #516CED 55%, #5650EA 100%);
  --bl-grad-logo-v:   linear-gradient(180deg, #46B5F3 0%, #516CED 55%, #5828E0 100%);
  --bl-grad-pastel:   linear-gradient(90deg, #BEE8F8 0%, #C9D8FA 45%, #D6C8F1 75%, #CDB8EC 100%);
  --bl-grad-pastel-v: linear-gradient(180deg, #BEE8F8 0%, #D6C8F1 100%);
  --bl-grad-stroke:   linear-gradient(90deg, #B2DEFA 0%, #D1C8F3 50%, #D7BFF0 100%); /* used on frame borders */
  --bl-grad-photo:    linear-gradient(135deg, rgba(70,181,243,0.35) 0%, rgba(81,108,237,0.45) 55%, rgba(88,40,224,0.55) 100%);

  /* ---------- Neutrals ---------- */
  --bl-ink:           #1D0060;          /* default body text           */
  --bl-ink-2:         #4A3A8F;          /* secondary text              */
  --bl-ink-3:         #8A80B5;          /* tertiary / caption          */
  --bl-line:          #E7E3F4;          /* hairline separator          */
  --bl-surface:       #FFFFFF;
  --bl-surface-soft:  #F7F5FD;          /* canvas / app background     */
  --bl-surface-alt:   #F1ECFB;

  /* ---------- Semantic roles ---------- */
  --fg-primary:       var(--bl-ink);
  --fg-secondary:     var(--bl-ink-2);
  --fg-tertiary:      var(--bl-ink-3);
  --fg-on-gradient:   #FFFFFF;
  --fg-accent:        var(--bl-purple-deep);

  --bg-page:          var(--bl-surface);
  --bg-canvas:        var(--bl-surface-soft);
  --bg-card:          #FFFFFF;
  --bg-accent:        var(--bl-violet);
  --bg-accent-soft:   var(--bl-surface-alt);

  --border-subtle:    var(--bl-line);
  --border-gradient:  var(--bl-grad-stroke);

  --accent:           var(--bl-purple-deep);
  --accent-soft:      var(--bl-lavender-100);

  /* Status colors — derived, not shown in brand assets so kept muted */
  --status-success:   #3AAE7B;
  --status-warning:   #E8A93A;
  --status-danger:    #DC5A6A;
  --status-info:      var(--bl-blue-bright);

  /* ---------- Type families ---------- */
  --font-display:     'Poppins', 'Helvetica Neue', Arial, sans-serif;     /* brand sans — wordmark, UI, headlines, body */
  --font-display-alt: 'Bebas Neue', 'Helvetica Neue Condensed', Impact, sans-serif; /* tall condensed — oversized numerals, hero labels, all-caps display */
  --font-body:        'Poppins', 'Helvetica Neue', Arial, sans-serif;     /* same family as display; use lighter weights (300–500) for paragraphs */
  --font-mono:        'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---------- Type scale (for slides @ 1920 base; scales down fine) ---------- */
  --fs-display-xl:    clamp(48px, 6vw, 96px);
  --fs-display:       clamp(40px, 4.5vw, 72px);
  --fs-h1:            clamp(34px, 3.2vw, 56px);
  --fs-h2:            clamp(26px, 2.2vw, 40px);
  --fs-h3:            clamp(22px, 1.6vw, 30px);
  --fs-h4:            20px;
  --fs-body-lg:       18px;
  --fs-body:          16px;
  --fs-small:         14px;
  --fs-caption:       12px;
  --fs-eyebrow:       11px;

  --lh-tight:         1.1;
  --lh-snug:          1.25;
  --lh-normal:        1.5;
  --lh-loose:         1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-xwide:   0.14em;   /* ALL-CAPS eyebrows */

  /* ---------- Shape / spacing ---------- */
  --radius-sm:        6px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --radius-xl:        32px;      /* signature soft card                */
  --radius-pill:      999px;

  /* 4px base 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;

  /* ---------- Elevation ---------- */
  --shadow-xs:  0 1px 2px   rgba(29,0,96,0.06);
  --shadow-sm:  0 2px 6px   rgba(29,0,96,0.08);
  --shadow-md:  0 8px 24px  rgba(29,0,96,0.10);
  --shadow-lg:  0 18px 48px rgba(29,0,96,0.14);
  --shadow-focus: 0 0 0 3px rgba(86,80,234,0.35);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* =====================================================================
   Semantic element styles
   ===================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .bl-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0 0 0.5em;
}

h2, .bl-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
  margin: 0 0 0.5em;
}

h3, .bl-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0 0 0.5em;
}

h4, .bl-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0 0 0.5em;
}

p, .bl-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
  margin: 0 0 1em;
  text-wrap: pretty;
}

.bl-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-primary);
  max-width: 62ch;
}

.bl-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.bl-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.bl-gradient-text {
  background: var(--bl-grad-logo);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

small, .bl-small { font-size: var(--fs-small); color: var(--fg-tertiary); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
a { color: var(--bl-purple-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--sp-5) 0; }

::selection { background: var(--bl-lavender-100); color: var(--bl-indigo); }