/* ── Design tokens ────────────────────────────────────────────────────────────
   Single source of truth for colour across every page. Before this existed there
   were 3,652 hardcoded colour values and no variables, so changing the palette
   meant hand-editing nine files.

   Two forms of each base hue:
     --x        the literal, for `color:` and `background:`
     --x-rgb    the triplet, so alpha variants stay composable:
                  rgba(var(--ink-rgb), .72)

   NOTE: canvas drawing (the certificate, share cards) cannot read CSS variables.
   Those colours stay literal in JS on purpose — see brand values below if you
   change the palette, they must be updated together.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* base surface — the deep navy the whole product sits on */
  --navy-900: #0B1F4E;  --navy-900-rgb: 11, 31, 78;
  --navy-850: #13224E;  --navy-850-rgb: 19, 34, 78;
  --navy-800: #1B2350;  --navy-800-rgb: 27, 35, 80;
  --navy-700: #1B2A6B;  --navy-700-rgb: 27, 42, 102;
  --navy-600: #22306B;  --navy-600-rgb: 34, 48, 107;

  /* light ink used on navy, and the light page surfaces */
  --ink:        #F7F9FF; --ink-rgb: 247, 249, 255;
  --surface:    #FFFFFF;
  --surface-2:  #F6F7FB;
  --surface-3:  #F7F9FE;
  --hairline:   #E4E9F6;
  --hairline-2: #EFF3FC;
  --hairline-3: #D7DEF1;

  /* brand accent — the gold that carries CTAs and highlights */
  --accent:      #FFC531; --accent-rgb: 255, 197, 49;
  --accent-soft: #FFD36B;
  --accent-deep: #8A6400;

  /* alert / villain red */
  --danger:      #E23636; --danger-rgb: 226, 54, 54;
  --danger-deep: #B11313;
  --danger-soft: #FF6B6B;
  --danger-pale: #FF9B9B;

  /* success / progress green */
  --success:      #2BB673; --success-rgb: 43, 182, 115;
  --success-deep: #177A4C;
  --success-soft: #7BE0AE;

  /* informational blue */
  --link:      #3D6BFF; --link-rgb: 61, 107, 255;
  --link-soft: #8FA9FF;

  /* medal metals */
  --gold:   #FFD36B;
  --silver: #C6CEDC;
  --bronze: #E8B77D;

  /* ── Elevation ──────────────────────────────────────────────────────────────
     The old palette painted page, card and band in one navy, so nothing sat above
     anything. Ground drops darker; surfaces step up. Scheme B (dashboard, heroes)
     uses --elev-*, scheme C (long-form reading) uses --content-*.               */
  --ground:  #071634; --ground-rgb: 7, 22, 52;   /* page floor, below every card */
  --elev-1:  #12224F;                            /* modals, popovers, side panels */
  --elev-2:  #1B2A5E;                            /* raised cards on the dashboard */
  --elev-border: rgba(255, 255, 255, .14);
  --elev-shadow: 0 10px 26px rgba(0, 0, 0, .35);

  /* scheme C: light reading surfaces on the navy ground */
  --content-surface: #FFFFFF;
  --content-ink:     #101A3D;
  --content-ink-2:   #63708F;
  --content-line:    #E4E9F6;
  --content-track:   #EDF1FA;
}