/* =====================================================================
   theme.css - Design tokens (Maple Meadow)
   Single-theme build. Every colour/space/radius is a CSS variable, so
   you can retune the whole portal from this one file (same idea as your
   original tokens.css, just extended with pixel fonts + a pastel set).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=Quicksand:wght@500;600;700&display=swap');

:root {
    /* ---- Type families ---- */
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Inter', -apple-system, system-ui, sans-serif;
    /* Display/label face. The names are historical (this used to be the
       pixel-font pair); both now resolve to Quicksand, the friendly
       rounded face used for every label, button, chip and tag. */
    --pixel: 'Quicksand', 'Inter', -apple-system, system-ui, sans-serif;
    --pixel-tight: 'Quicksand', 'Inter', -apple-system, system-ui, sans-serif;

    /* ---- Type scale (mobile-first) ---- */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.6rem;
    --text-2xl: 2.1rem;
    --text-3xl: 2.6rem;

    /* ---- Label sizes (fixed px) ----
       --px-xs is the floor, used only for short uppercase tag chips. */
    --px-xs: 11px;
    --px-sm: 12px;
    --px-md: 14px;
    --px-lg: 16px;
    --px-xl: 20px;

    /* ---- Spacing (8pt) ---- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 36px;
    --space-2xl: 52px;

    /* ---- Structure ---- */
    --content-max: 460px;
    --page-pad: 18px;
    --nav-height: 68px;
    --dock-h: 72px;        /* guide dock clearance */
    --radius: 22px;
    --radius-sm: 14px;
    --radius-pill: 999px;

    /* ---- Component knobs ---- */
    --card-border-w: 1.5px;
    --frame-w: 0px;
    --tap-scale: 0.96;

    --ease: 0.28s cubic-bezier(.4,.1,.2,1);
    --ease-bounce: 0.5s cubic-bezier(.34,1.56,.64,1);

    /* ---- Motion durations ---- */
    --dur-fast: .15s;
    --dur-med: .25s;
    --dur-slow: .5s;
    --typew: 28ms;        /* typewriter, per character */
    --bob-dur: 4.5s;      /* shared ambient bob */
    --drift-dur: 30s;     /* shared cloud drift */

    /* ---- Wedding pastel palette (used for story colour) ---- */
    --c-peach:  #f6b79c;
    --c-rose:   #f2a3bb;
    --c-coral:  #f59a86;
    --c-butter: #f7d486;
    --c-mint:   #9fdcc0;
    --c-sage:   #bcd99a;
    --c-sky:    #a7d6ef;
    --c-lav:    #cabaf0;

    /* ---- Retro arcade palette (games hub + embedded minigames) ---- */
    --arcade-pink:  #ff5fa2;
    --arcade-gold:  #ffcf48;
    --arcade-cyan:  #36e0d0;
    --arcade-plum:  #5b2a6e;
    --arcade-ink:   #2a1430;
    --arcade-cream: #fff6ef;

    /* ---- Surfaces (airy, candy-light) ---- */
    --paper:      #fffaf3;   /* page background, bright airy cream */
    --paper-2:    #fffdfa;
    --card:       #ffffff;   /* surface */
    --card-2:     #fdf4ec;
    --card-warm:  #fdeede;

    /* ---- Ink ---- */
    --ink:        #5b4636;   /* warm brown text */
    --ink-soft:   #9a8369;
    --ink-mute:   #c2ab8e;

    /* ---- Accent (copper-coral) ---- */
    --accent:     #e69a6b;
    --accent-deep:#cf7a45;
    --accent-soft:#f7d3b3;
    --line:       #f3e7d7;
    --frame:      transparent;

    /* ---- Per-mascot accents (dialogue name tags, bubbles) ---- */
    --vio:       #d9799e;   /* Yi Fang, rose */
    --vio-deep:  #b95c80;
    --vio-soft:  #f7dbe6;
    --mush:      #e8973a;   /* Jiahao, orange-gold */
    --mush-deep: #c4751f;
    --mush-soft: #f9e2c2;

    /* ---- Window chrome (soft, airy) ----
       The old heavy double-ring RPG chrome is retired: borders are a
       light warm tone, depth comes from gentle shadows. --chrome stays
       defined as a no-op so older box-shadow lists remain valid. */
    --bw: 1.5px;                 /* standard border width */
    --frame-ink: #e9d6c1;        /* soft warm border */
    --frame-strong: #d9bfa4;     /* darker border for tiny elements that wash out */
    --ring-1: rgba(255,255,255,.85);
    --ring-2: #f6e3cd;
    --chrome: 0 0 transparent;
    --chrome-shadow: 0 8px 24px -12px rgba(176,116,66,.35);
    --gw-radius: 18px;

    /* ---- Leaderboard medals ---- */
    --medal-1a: #f7d486; --medal-1b: #e0a23a;
    --medal-2a: #d7d9de; --medal-2b: #a7adb6;
    --medal-3a: #e6b58a; --medal-3b: #c98a5a;

    /* ---- Mascot box size steps ---- */
    --m-sm: 32px;
    --m-md: 48px;
    --m-lg: 64px;
    --m-xl: 96px;

    /* ---- World / scene ---- */
    --sky-1:      #bfe6f2;
    --sky-2:      #fdeede;
    --hill-far:   #c8e6ad;
    --hill-near:  #aad98c;
    --ground:     #f0dcb0;
    --gold:       #f7c64f;
    --rose:       #f29bb0;
    --leaf:       #74b06a;

    /* ---- Elevation ---- */
    --card-shadow: 0 8px 24px -12px rgba(180,120,70,.28),
                   inset 0 2px 0 rgba(255,255,255,.7);
    --pop-shadow:  0 16px 36px -14px rgba(176,116,66,.35);
    --glow: none;
    --card-border-col: var(--line);
}

/* ---- Page identity accents ----
   Each page tints its eyebrow pill and small details with its own
   pastel. Portal.route() sets body[data-page]. */
:root { --page-accent: var(--c-peach); }
body[data-page="home"]     { --page-accent: var(--c-peach); }
body[data-page="schedule"] { --page-accent: var(--c-sky); }
body[data-page="wishes"]   { --page-accent: var(--c-rose); }
body[data-page="games"]    { --page-accent: var(--c-mint); }
body[data-page="profile"]  { --page-accent: var(--c-butter); }
body[data-page="picker"]   { --page-accent: var(--c-lav); }

/* Mushrooms corner page accent */
body[data-page="mushrooms"] { --page-accent: var(--c-rose); }