/* parent/theme.css — design tokens for all parent pages.
   Load this BEFORE parent.css.
   Radii, type scale and font weights are declared here but the page CSS
   still hardcodes most of them, so changing those tokens has little effect
   until the consumers are wired up.
   Not loaded by admin.html, which keeps its own dark palette. */

:root {
    /* ── Brand ──
       Calm Console: green is an accent, not a background. Deepened from the
       #34d399 mint so white button text clears contrast on a light page. */
    --primary: #059669;
    --primary-dark: #047857;
    --primary-shadow: #065f46;
    --primary-light: #f2f9f6;
    --primary-muted: #eef6f2;
    --primary-border: #cfe6db;
    --primary-text: #047857;

    /* ── Semantic ── */
    --danger: #ef4444;
    --danger-dark: #b91c1c;
    --danger-bg: #fef2f2;
    --danger-border: #fca5a5;
    --success: #15803d;
    --success-bg: #f0fdf4;
    --success-border: #86efac;
    --info: #1d4ed8;
    --info-bg: #eff6ff;
    --info-border: #93c5fd;

    /* ── Neutral ramp ──
       Collects the greys that were hardcoded across the parent pages. */
    --n-900: #0f172a;
    --n-700: #334155;
    --n-600: #475569;
    --n-500: #64748b;
    --n-400: #94a3b8;
    --n-300: #cbd5e1;
    --n-200: #e2e8f0;
    --n-50:  #f8fafc;
    --white: #ffffff;

    /* ── Text & surface ── */
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: #e4e9e7;
    --shadow-border: #dde4e1;
    --surface: #f6f8f9;
    --surface-elevated: #ffffff;

    /* ── Radii ──
       Named by role, not by size, so a control never accidentally picks up
       a card's curve. Was a 4px–40px free-for-all. */
    --radius-chip: 8px;     /* tags, badges, small toggles */
    --radius-control: 10px; /* buttons, inputs, selects */
    --radius-tile: 12px;    /* rows and tiles nested inside a card */
    --radius-card: 16px;    /* cards, panels, modals */
    --radius-pill: 999px;

    /* ── Border widths ── */
    --bw-hair: 1px;
    --bw-thick: 1px;
    --bw-heavy: 1px;

    /* ── Type scale ── */
    --fs-2xs: 10px;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 13px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;

    /* ── Font weights ──
       Was 700/800/900 across the board, which flattened the hierarchy —
       everything shouted. 900 is now reserved for figures. */
    --fw-body: 500;
    --fw-label: 600;
    --fw-title: 700;
    --fw-number: 800;

    /* ── Spacing ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* ── Page background ── */
    --page-bg: #f6f8f9;

    /* ── Elevation ── */
    --elev-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --elev-modal: 0 12px 40px rgba(15, 23, 42, 0.18);
    --scrim: rgba(15, 23, 42, 0.4);

    /* Button shadows, paired with a matching :active translate. The solid
       "0 6px 0" ledges are flattened to a soft 1px lift. */
    --shadow-btn-primary: 0 1px 2px rgba(5, 150, 105, 0.28);
    --shadow-btn-secondary: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-btn-icon: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-btn-pill: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-btn-danger: 0 1px 2px rgba(220, 38, 38, 0.28);
    --press-translate: 1px;
    --press-translate-sm: 1px;
    --press-translate-xs: 1px;

    /* ── Layout ── */
    --content-width: 1040px;
}

.currency-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
    vertical-align: -4px;
    flex-shrink: 0;
}

.catalog-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.catalog-avatar-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}

/* Custom avatars are already circular stickers — show the full badge, do not zoom the face. */
.kid-avatar:has(> img),
.kp-hero-avatar:has(> img) {
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.18));
}