:root{
/* --- Brand palette (verbatim from the Tappzi colour sheet) --- */
--fantasy:#F5F4ED;          /* off-white paper */
--light-gold:#FFDA57;       /* primary brand yellow */
--smoky-black:#100F06;      /* near-black ink */
--malibu:#7DCAF6;           /* sky blue */
--bright-lavender:#A293FF;  /* violet */
--teal:#00917A;             /* deep green — the action colour */
--blossom-pink:#FFBBF4;     /* pink */
--light-coral:#F47575;      /* coral red */

/* --- Extended values sampled from product screens --- */
--fantasy-deep:#EDEBE0;     /* paper, one step down (pressed / inset) */
--fantasy-warm:#E7E4D6;     /* topographic texture line colour */
--smoky-black-soft:#2E2C27; /* dark surface (result screen, chrome) */
--gold-deep:#F2C63C;        /* yellow pressed / shadow edge */
--teal-deep:#00745F;        /* teal pressed */
--teal-ink:#04624F;         /* teal used as text on light */
--coral-deep:#E05F5F;
--lavender-deep:#8B79FF;
--mint-tint:#DFF3E4;        /* correct answer tint */
--coral-tint:#FBD3D3;       /* wrong answer tint */
--gold-tint:#FFF0BE;
--orange:#F0993E;           /* "you" highlight row */
--white:#FFFFFF;
--ink-60:#6E6B5F;           /* muted body text on paper */
--ink-40:#9E9B8E;           /* placeholder / disabled label */
--ink-20:#CFCCC0;           /* inactive dot, hairline */

/* --- Semantic aliases: use these in components --- */
--surface-page:var(--fantasy);
--surface-card:var(--white);
--surface-panel:var(--light-gold);   /* the yellow answer panel */
--surface-inset:var(--fantasy-deep);
--surface-dark:var(--smoky-black-soft);
--surface-chrome:var(--smoky-black); /* bottom nav bar, sheets */

--text-strong:var(--smoky-black);
--text-body:var(--smoky-black);
--text-muted:var(--ink-60);
--text-placeholder:var(--ink-40);
--text-on-dark:var(--fantasy);
--text-on-teal:var(--white);
--text-accent:var(--teal-ink);

--action-primary:var(--teal);
--action-primary-press:var(--teal-deep);
--action-ink:var(--smoky-black);      /* black pill button */
--action-ink-press:#000000;

--accent-1:var(--light-gold);
--accent-2:var(--malibu);
--accent-3:var(--bright-lavender);
--accent-4:var(--blossom-pink);
--accent-5:var(--light-coral);
--accent-6:var(--teal);

--state-correct:var(--teal);
--state-correct-surface:var(--mint-tint);
--state-wrong:var(--light-coral);
--state-wrong-surface:var(--coral-tint);
--state-warning:var(--orange);

--border-hairline:var(--ink-20);
--focus-ring:var(--bright-lavender);
}