/* Moonvale mobile design tokens — the ONLY source of design constants.
   Day theme on :root; night theme overrides via [data-theme="night"].
   (spec: specs/mobile-ui-architecture-v1.md §5.2) */
:root {
    /* Native shell contract: Capacitor 8 SystemBars injects --safe-area-inset-*
       on older Android WebViews; normal browsers fall back to CSS env(). */
    --mv-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --mv-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
    --mv-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
    --mv-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));

    /* color — day */
    --paper: #F6F1E7;
    --paper-card: #FDFAF3;
    --ink: #3E3A33;
    /* --ink-soft darkened #6E675C→#5A544A for WCAG AA at 12px on --paper-card
       (~5:1, was ~4:1 — fails AA for combat HP/stat numbers). Night overrides below. */
    --ink-soft: #5A544A;
    --moon: #7B8FBF;
    --moon-deep: #5A6C9E;
    --accent-warm: #D9A05B;
    --hp: #C96A5B;
    /* HP-band semantics for combat bars (green→amber→red by ratio) */
    --hp-high: #5BA974;
    --hp-mid: #D9A05B;
    --hp-low: #C9564A;
    --stamina: #5BA974;
    --mana: #6B7FD4;
    --xp: #B08FD4;
    --safe: #5BA974;
    --warn: #D9A05B;
    --danger: #C96A5B;
    /* enemy attack-charge = its OWN warning hue (was reusing --accent-warm =
       same yellow as the damage-loss trail; two meanings, one colour) */
    --charge: #C77B4A;
    --line: #E3DACA;

    /* combat stage shadows/glow — tokenized so night theme can invert them
       (the reskin had hardcoded light-paper rgba shadows → muddy on night) */
    --shadow-ink: rgba(62, 58, 51, .10);
    --shadow-ink-strong: rgba(62, 58, 51, .22);
    --glow-moon: rgba(123, 143, 191, .28);
    --bar-inset: rgba(0, 0, 0, .22);
    --bar-gloss: rgba(255, 255, 255, .4);

    /* type — TC first */
    --font-ui: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    /* Compact type may sit below the 12px phone label floor only for short,
       high-contrast numbers. Supporting Chinese copy starts at --text-xs. */
    --text-micro: 11px;
    --text-xs: 12px;
    --text-meta: 13px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 26px;

    /* space / shape */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --radius-card: 12px;
    --radius-chip: 999px;
    /* radius scale for combat surfaces (the reskin invented magic 8/14/16/24px) */
    --radius-bar: 8px;
    --radius-lg: 16px;
    --radius-stage: 24px;
    --stage-sprite-size: 148px;
    --touch-min: 44px;
    --tabbar-h: 56px;
}

[data-theme="night"] {
    /* Wave58 clear moonlight: night is a composed teal／flax palette,
       never a desaturated copy of day or the legacy purple-grey paper. */
    --paper: #102D36;
    --paper-card: #173F46;
    --ink: #F4E8C8;
    --ink-soft: #C4D5CC;
    --line: #3C6B6B;
    --moon: #9FB6D5;
    --moon-deep: #6F8FAF;
    --accent-warm: #E0B45F;
    /* invert the combat shadows/gloss for the dark night paper: on #232A3D a
       light-paper "ink" inset reads muddy and a white gloss reads washed-out.
       Deepen the shadow (dark on dark = depth) and mute the gloss. */
    --shadow-ink: rgba(0, 0, 0, .32);
    --shadow-ink-strong: rgba(0, 0, 0, .5);
    --glow-moon: rgba(159, 182, 213, .3);
    --bar-inset: rgba(0, 0, 0, .4);
    --bar-gloss: rgba(255, 255, 255, .16);
}