/* Bandlingo Students Portal — token surface
 * Mirrors the parent design system (colors_and_type.css), trimmed
 * to what the portal uses. Source of truth lives in the design system.
 */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* Surface */
  --bl-paper:        #FAFAF8;
  --bl-paper-warm:   #FFFFFF;
  --bl-paper-cool:   #F3F3F0;
  --bl-ink:          #1F2926;
  --bl-ink-soft:     #3D4744;
  --bl-muted:        #8D8D88;
  --bl-line:         #ECECE8;
  --bl-line-strong:  #D7D7D2;

  /* Brand */
  --bl-blue:         #2347E5;
  --bl-blue-deep:    #1A36BC;
  --bl-blue-soft:    #E1E8FA;
  --bl-blue-tint:    #F0F3FD;

  /* Hot accent */
  --bl-orange:       #F58050;
  --bl-orange-deep:  #D26431;
  --bl-orange-soft:  #FBDDCB;
  --bl-orange-tint:  #FCEEE3;

  /* Accents */
  --bl-sky:          #94B8D9;
  --bl-sky-soft:     #DCE6F0;
  --bl-butter:       #E5C16A;
  --bl-butter-soft:  #F7E9C4;
  --bl-sage:         #8FB89A;
  --bl-sage-soft:    #DDE7DE;
  --bl-plum:         #A48BC8;
  --bl-plum-soft:    #E0D6EE;

  /* Semantic */
  --bl-success:      #5B9A6E;
  --bl-success-bg:   #DAE6DA;
  --bl-warning:      #D8A050;
  --bl-warning-bg:  #F7E5C7;
  --bl-danger:       #D6644A;
  --bl-danger-bg:    #F7DDD3;

  /* Type */
  --bl-font-sans:    'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bl-font-hand:    'Caveat', cursive;

  /* Spacing */
  --bl-sp-xs: 4px;
  --bl-sp-sm: 8px;
  --bl-sp-md: 12px;
  --bl-sp-lg: 16px;
  --bl-sp-xl: 20px;
  --bl-sp-2x: 24px;
  --bl-sp-3x: 32px;
  --bl-sp-4x: 48px;

  /* Radius */
  --bl-r-xs:   6px;
  --bl-r-sm:  10px;
  --bl-r-md:  14px;
  --bl-r-lg:  20px;
  --bl-r-xl:  28px;
  --bl-r-pill: 999px;

  /* Shadow */
  --bl-shadow-sm: 0 1px 2px rgba(31,41,38,.06), 0 1px 1px rgba(31,41,38,.04);
  --bl-shadow-md: 0 4px 12px rgba(31,41,38,.06), 0 1px 2px rgba(31,41,38,.04);
  --bl-shadow-lg: 0 12px 32px rgba(31,41,38,.08), 0 2px 6px rgba(31,41,38,.04);
  --bl-shadow-ink: 0 2px 0 rgba(31,41,38,1);
}

* { box-sizing: border-box; }

.bl-surface {
  background: var(--bl-paper);
  color: var(--bl-ink);
  font-family: var(--bl-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Type utilities (subset) */
.bl-h1   { font: 700 28px/1.15 var(--bl-font-sans); letter-spacing: -0.4px; color: var(--bl-ink); margin: 0; }
.bl-h2   { font: 700 22px/1.2  var(--bl-font-sans); letter-spacing: -0.3px; color: var(--bl-ink); margin: 0; }
.bl-h3   { font: 600 18px/1.25 var(--bl-font-sans); letter-spacing: -0.2px; color: var(--bl-ink); margin: 0; }
.bl-body { font: 400 15px/1.5  var(--bl-font-sans); color: var(--bl-ink-soft); margin: 0; }
.bl-body-bold { font: 600 15px/1.5 var(--bl-font-sans); color: var(--bl-ink); margin: 0; }
.bl-small { font: 400 13px/1.4 var(--bl-font-sans); color: var(--bl-ink-soft); margin: 0; }
.bl-caption { font: 500 11px/1.3 var(--bl-font-sans); color: var(--bl-muted); letter-spacing: 0.2px; margin: 0; }
.bl-overline { font: 600 11px/1.2 var(--bl-font-sans); color: var(--bl-muted); letter-spacing: 0.8px; text-transform: uppercase; margin: 0; }
.bl-hand { font-family: var(--bl-font-hand); font-weight: 600; color: var(--bl-ink-soft); }