/* ============================================================
   🎨 ENGLISH SKILL BUILDER — THE ONE PLACE FOR COLOURS
   Change a colour here and every page follows.
     BLUE  = main colour (menus, buttons, headings)
     BEIGE = page backgrounds and cards
     WHITE = writing areas, tables and pop-ups
     GREEN = correct / done · RED = wrong / to mark · GOLD = stars
   All text colours below pass WCAG AA contrast (4.5 : 1 or more)
   on white, card beige and page beige.
   ============================================================ */
:root {
  /* ── Blue (brand) ── */
  --brand:          #1E3A5F;   /* deep blue — menus, buttons, headings */
  --brand-light:    #3B6EA8;   /* lighter blue — highlights, links on dark */
  --brand-dark:     #152B47;
  --brand-darkest:  #0F1F33;
  --brand-soft:     #BFD0E4;   /* borders on blue items */
  --brand-tint:     #EAF1F9;   /* very light blue — selected rows, chips */

  /* ── Beige + white ── */
  --bg-page:        #F7F1E6;   /* page */
  --bg-card:        #FBF7EF;   /* cards */
  --bg-accent:      #F2E9D8;   /* beige bands */
  --surface:        #FFFFFF;   /* writing areas, tables, pop-ups */
  --line:           #E3D8C4;   /* borders on beige */

  /* ── Text ── */
  --ink-darkest:    #0F1F33;
  --ink-dark:       #152B47;
  --ink-mid:        #2E4A66;
  --ink-soft:       #46607C;
  --ink-muted:      #55687D;
  --ink-on-dark:    #FFFFFF;
  --ink-on-dark-soft: #F3E9D9;

  /* ── Meaning colours (unchanged) ── */
  --success:        #166534;   /* green — correct / done */
  --success-tint:   #DCFCE7;
  --danger:         #B91C1C;   /* red — wrong / to mark */
  --danger-tint:    #FDE8E8;
  --gold:           #C9A426;   /* stars */
  --gold-l:         #E8C547;
}