/* Biwai design tokens — v2, extracted 1:1 from "Biwai Thi Thu Redesign.dc.html".
   Source: Doc/Design/Admin Pages - Giao diện làm lại của admin -update-guide-css/
   design_handoff_exam/biwai-tokens.css. Values are the handoff's, unchanged; the
   block at the end keeps names that v1 had and v2 dropped (see there). */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');

:root {
  /* ink */
  --bw-ink:          #0D2F3C;  /* headings, option words, numbers */
  --bw-text:         #274A57;  /* body + passage prose   (v1 was #193B45) */
  --bw-text-2:       #3C5866;  /* secondary labels, audio times */
  --bw-text-muted:   #4A6875;  /* captions, option keys  (v1 was #5A757E) */
  --bw-icon-faint:   #B7C8D0;  /* chevrons */
  --bw-icon-soft:    #7C99A6;

  /* surfaces */
  --bw-bg:           #F2F6F8;  /* page + neutral button fill (v1 was #F4F7F8) */
  --bw-surface:      #FFFFFF;
  --bw-surface-2:    #F7FAFB;  /* audio bar */
  --bw-border:       #E3EBEF;  /* 1.5px card/option border (v1 was #D7E2E6) */
  --bw-divider:      #EEF3F5;  /* card header rule */
  --bw-track:        #E1E9ED;  /* empty progress / ring track */

  /* brand teal */
  --bw-teal:         #00789C;
  --bw-teal-dark:    #005E7C;  /* 3D button shadow, selected border */
  --bw-teal-ink:     #00506B;  /* text on teal-soft */
  --bw-teal-soft:    #E4F5FC;  /* empty slot fill */
  --bw-teal-tint:    #F4FBFE;  /* active blank card fill */
  --bw-teal-line:    #6FA8BF;  /* empty slot dashed border */
  --bw-teal-hover:   #9FC9D8;  /* option hover border */
  --bw-sidebar:      #103E48;

  /* state */
  --bw-correct:        #0A7A3B;
  --bw-correct-ink:    #0A6B36;
  --bw-correct-bg:     #E7F8EE;  /* v1 was #E8F5E9 */
  --bw-correct-line:   #B6DEC7;
  --bw-correct-tint:   #F6FCF8;
  --bw-correct-shadow: #06552A;
  --bw-wrong:          #C22B2B;
  --bw-wrong-dark:     #A81E1E;
  --bw-wrong-bg:       #FEECEC;  /* v1 was #FDE7E7 */
  --bw-wrong-line:     #F8D4D4;
  --bw-warn:           #8A5200;  /* v1 was #8A5A00 */
  --bw-warn-bg:        #FFF6E5;  /* v1 was #FFF8E1 */
  --bw-warn-line:      #FFE0A8;
  --bw-warn-icon:      #E08A00;
  --bw-live:           #2F4E9E;  /* "THI THẬT" chip text */
  --bw-live-bg:        #E8EEFB;

  /* gamification */
  --bw-orange:       #F19B48;
  --bw-orange-soft:  #FFEFDD;
  --bw-coin:         #E3A21B;

  /* spacing — the design uses these exact steps */
  --bw-s1: 4px; --bw-s2: 8px; --bw-s3: 12px; --bw-s4: 16px;
  --bw-s5: 24px; --bw-s6: 32px; --bw-s7: 40px;

  /* radii */
  --bw-r-chip: 999px;
  --bw-r1: 8px;   /* passage slot */
  --bw-r2: 12px;  /* option tile, icon button */
  --bw-r3: 16px;  /* blank card, primary button */
  --bw-r4: 20px;  /* panels */

  /* shadows */
  --bw-shadow-panel: 0 18px 40px rgba(13,47,60,.16), 0 0 0 1px rgba(13,47,60,.09);
  --bw-shadow-pop:   0 6px 18px rgba(0,120,156,.22);
  --bw-press-teal:   0 4px 0 var(--bw-teal-dark);
  --bw-press-green:  0 4px 0 var(--bw-correct-shadow);
  --bw-press-red:    0 4px 0 var(--bw-wrong-dark);

  /* type — Nunito only. 600 body, 700 captions, 800 labels, 900 headings/numbers */
  --bw-font: 'Nunito', system-ui, -apple-system, sans-serif;

  /* motion */
  --bw-ease-out:    cubic-bezier(.22,1,.36,1);
  --bw-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --bw-t-fast: 120ms;  /* press */
  --bw-t-base: 180ms;  /* hover, select */
  --bw-t-slow: 320ms;  /* state change of a card */
  --bw-t-hero: 900ms;  /* score count-up, bar fill */

  --bw-breakpoint: 900px;
  --bw-touch: 44px;   /* min hit target; primary CTA 52–56px */
}

.bw-scope, .bwx-scope {
  background: var(--bw-bg);
  color: var(--bw-text);
  font-family: var(--bw-font);
  -webkit-font-smoothing: antialiased;
}

/* ── kept from v1 ─────────────────────────────────────────────────────────
   The handoff calls v2 a drop-in replacement with every existing name kept, but it
   drops these, and each is still in use:
   · --bw-font-head / --bw-font-body — ten references across the stylesheets. An
     undefined var() voids the whole declaration, so the streak card's
     "font-family: 'Be Vietnam Pro', var(--bw-font-body)" would silently fall
     back to Nunito.
   · the admin heading rule, .bw-tap and .bw-mascot, which v1 declared here. */
:root {
  --bw-font-head: var(--bw-font);
  --bw-font-body: var(--bw-font);
}

.bw-scope h1, .bw-scope h2, .bw-scope h3 {
  font-family: var(--bw-font);
  font-weight: 800;
  color: var(--bw-ink);
}

/* Every interactive control in a redesigned view gets this. */
.bw-scope .bw-tap {
  min-height: var(--bw-touch);
  min-width: var(--bw-touch);
}

/* Streak mascot, for views that still show it. */
.bw-scope .bw-mascot {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}