:root{
/* ---- soft warm shadows: app chrome (dashboard, landing, tracker) ---- */
--shadow-card:0 4px 16px 0 rgba(200,150,100,.12);
--shadow-card-sm:0 4px 12px 0 rgba(200,150,100,.10);
--shadow-card-xs:0 2px 8px 0 rgba(200,150,100,.15);
--shadow-card-graph:0 4px 12px 0 rgba(200,150,100,.102);
--shadow-card-prompt:0 4px 14px 0 rgba(200,150,100,.10);
--shadow-header:0 4px 12px 0 rgba(200,150,100,.15);
--shadow-badge:0 4px 10px 0 rgba(240,130,74,.149);

/* ---- glow CTAs: app screens ---- */
--shadow-cta-orange:0 6px 16px 0 rgba(224,110,50,.35);
--shadow-cta-amber:0 6px 16px 0 rgba(240,168,48,.30);

/* ---- hard "candy" drop shadows: activities. No blur — a solid ledge ---- */
--shadow-hard-3-ink:0 3px 0 0 rgba(43,27,23,.20);
--shadow-hard-4-ink:0 4px 0 0 rgba(43,27,23,.251);
--shadow-hard-4-ink-warm:0 4px 0 0 rgba(61,43,31,.251);
--shadow-hard-4-coral:0 4px 0 0 rgba(255,123,84,.251);
--shadow-hard-4-soft:0 4px 0 0 rgba(43,27,23,.1451);
--shadow-hard-5-ink:0 5px 0 0 rgba(61,43,31,.251);
--shadow-hard-5-coral:0 5px 0 0 rgba(255,87,34,.251);
--shadow-hard-6-amber:0 6px 0 0 rgba(255,213,111,.3137);
--shadow-mic:0 12px 16px 0 rgba(255,87,34,.1882),0 6px 0 0 rgba(255,87,34,.3765);

/* ---- lifted game cards ---- */
--shadow-game-card:0 6px 12px 0 rgba(43,27,23,.1451);
--shadow-game-card-warm:0 6px 12px 0 rgba(61,43,31,.1451);
--shadow-game-card-coral:0 6px 12px 0 rgba(255,123,84,.1882);
--shadow-game-card-ink:0 6px 12px 0 rgba(43,27,23,.20);
--shadow-letter-card:0 8px 16px 0 rgba(255,123,84,.1882);
--shadow-glow-amber:0 0 20px 0 rgba(255,213,111,.3765);

/* ---- inset rings (the file draws every "border" as an inner stroke) ---- */
--ring-hairline:inset 0 0 0 1.5px var(--hairline);
--ring-ink:inset 0 0 0 2.5px var(--ink-900);
--ring-ink-2:inset 0 0 0 2px var(--ink-900);
--ring-ink-3:inset 0 0 0 3px var(--ink-900);
--ring-coral:inset 0 0 0 2.5px var(--coral-400);
--ring-coral-2:inset 0 0 0 2px var(--coral-400);
--ring-amber:inset 0 0 0 2.5px var(--amber-300);
--ring-amber-2:inset 0 0 0 2px var(--amber-300);
--ring-green:inset 0 0 0 1.5px var(--green-500);
--ring-sky:inset 0 0 0 2px var(--sky-500);
--ring-suspect:inset 0 0 0 1.5px var(--orange-400);
}
