@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/brand/inter-400.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/brand/inter-500.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/brand/inter-600.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/brand/inter-700.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/brand/manrope-400.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/brand/manrope-500.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/brand/manrope-600.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/brand/manrope-700.ttf') format('truetype')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/brand/manrope-800.ttf') format('truetype')}

:root{--violet:#7047EB;--mint:#8BF0CF;--ink:#191625;--canvas:#F7F7FC}

/* Brand guide v1 UI tokens: light and dark roles (section 29) and semantic pairs for text on a tinted background.
   New screens use these names. Older layers keep their own variables (--bg, --surface, --line, --focus, ...), so adding
   these changes no existing screen. Dark mode follows html[data-theme="dark"], as everywhere on the learning site.
   Right or wrong is never shown by colour alone: a state always has an icon and a word as well. */
:root{
  --color-background:#F7F7FC;--color-surface:#FFFFFF;--color-text-primary:#191625;--color-text-secondary:#625D70;
  --color-action:#7047EB;--color-action-text:#FFFFFF;--color-link:#7047EB;--color-accent:#8BF0CF;
  --color-border:#D8D4E4;--color-focus:#7047EB;
  --success-text:#166534;--success-bg:#DCFCE7;--attention-text:#854D0E;--attention-bg:#FEF9C3;
  --error-text:#B91C1C;--error-bg:#FEE2E2;--info-text:#1D4ED8;--info-bg:#DBEAFE;
}
:root[data-theme="dark"]{
  --color-background:#191625;--color-surface:#262238;--color-text-primary:#FFFFFF;--color-text-secondary:#C9C4D6;
  --color-link:#BFA9FF;--color-border:#716780;--color-focus:#BFA9FF;
}
/* Pages without a theme script (the server's error pages) follow the device setting (learn-a WP-A9). Every other page
   sets html[data-theme] itself: the learner's choice, else the device setting (assets/learn/theme.js). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --color-background:#191625;--color-surface:#262238;--color-text-primary:#FFFFFF;--color-text-secondary:#C9C4D6;
    --color-link:#BFA9FF;--color-border:#716780;--color-focus:#BFA9FF;color-scheme:dark;
  }
}