@font-face {
    font-family: 'Oswald';
    src: url('/fonts/Oswald-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('/fonts/Oswald-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #070b12;
    --surface: #0f1724;
    --surface-deep: #0f172a;   /* intentional: hero card bg — slightly cooler/deeper than --surface */
    --surface2: #131d2e;
    --border: #1e2a3a;
    --border-on-alert: rgba(255, 255, 255, 0.25);   /* intentional: var(--border) is too dark to read on the red .unsaved-warning background, so this token exists as a documented exception rather than a raw value */
    --gold: #e2b04a;
    --gold-glow: #f0c860;
    --xp-green: #5cc98a;
    --easy: #6ab04c;
    --medium: #f0932b;
    --hard: #ec5755;
    --int-color: #60a5fa;
    --str-color: #f87171;
    --creativity-color: #c084fc;
    --wealth-color: #fbbf24;
    --area-color: #8bb8e0;
    /* ── Phase 3 (H-1 / H-2): dedicated semantic tokens ──
       --enemy-color used to reuse --creativity-color's purple (#c084fc),
       which then meant 3 unrelated things at once (Creativity attribute,
       Epic rarity, Enemy habit type). Enemy habits now get their own hue
       so it reads as "danger/challenge" rather than colliding with the
       purple family. --streak-flame consolidates what were 3 independent
       hand-picked oranges (hero streak number, streak glow, flame emoji
       glow) into one named token; --medium (difficulty) stays separate
       since difficulty and streak are different concepts that happened
       to share a similar orange by coincidence. */
    --enemy-color: #ec4899;
    --streak-flame: #ff9a3c;
    /* Companion RGB triplet so rgba()-based glow/shadow effects can
       reference --streak-flame too, not just solid-color properties.
       CSS custom properties can't be split into r/g/b components inside
       rgba() without relative-color syntax (rgb(from var(--x) r g b / a)),
       which isn't broadly supported yet — this triplet is the standard
       workaround: rgba(var(--streak-flame-rgb), 0.55). */
    --streak-flame-rgb: 255, 154, 60;
    /* ── Phase 3, Day 12 (M-5): dedicated token for the info-toast blue,
       previously a one-off hex (#8ab4f8) with no CSS variable. */
    --info-color: #8ab4f8;
    --ink: #1a1a1a;
    --dim-border: #2a3a2a;
    --dim-bg: #141a16;
    --mq-accent: #a78bfa;
    --mq-accent-rgb: 167, 139, 250;
    --xp-bar-bg: #1f2937;
    --text: #e0dcd0;
    --text-muted: #8a8a9a;
    --text-bright: #f5f0e8;
    --danger: #e0556a;
    --blue-accent: #6a9fd8;
    --font: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Consolas', monospace;
    /* ── Border-radius scale ──
       --radius-xs   8px    form inputs, checkboxes, tiny chrome
       --radius-sm  14px    pills, badges, small cards, stat items
       --radius     20px    area cards, habit cards, mid containers
       --radius-lg  24px    .card, .settings-card, large card tier
       --radius-full 100px  pill shapes, progress bars, toggles
       Raw values kept intentionally:
         50%              circles (avatar, level badge, close buttons)
         4px              action-btn, tiny structural chrome
         6px / 6px 6px 0 0   progress-bar fills and top-corners       */
    --radius-xs:   8px;
    --radius-sm:   14px;
    --radius:      20px;
    --radius-lg:   24px;
    --radius-full: 100px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Phase 5 (H-8): shared progress-fill timing ──
       One duration/easing for every progress-fill animation in the app
       (hero XP bar, achievement bars, stat bars/ring). Previously each
       component hand-picked its own duration (0.4s–1.4s) and a mix of
       ease / cubic-bezier(0.4,0,0.2,1) / cubic-bezier(0.22,1,0.36,1).
       Standardized on 0.7s + cubic-bezier(0.22,1,0.36,1) — already used
       by 2 of the 7 instances (achievement.css, areas.css v2). */
    --progress-duration: 0.7s;
    --progress-easing: cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Spacing Scale (Phase 1, Day 2) ──
       Every padding/margin/gap in the app should reference one of these
       instead of a freehand pixel value. Values that don't fit the 4px
       step (e.g. large one-off layout offsets like modal top-padding for
       a close button) are intentionally left as raw px — see audit H-3.
       --space-0 is a documented half-step exception below the 4px rhythm,
       covering the recurring "value → label" micro-nudge used ~8x in
       stat.css (e.g. .stat-page-header, .stat-pill-label) — snapping it
       to --space-1 (4px) visibly loosened that pairing, so it's kept as
       its own token rather than a repeated raw 2px. */
    --space-0: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --bottom-nav-height: 68px;

    /* ── Typography Scale (Day 3, complete) ──
       xs/sm/base/lg cover the tight micro-text clusters (badges, meta
       text, descriptions, buttons). xl/2xl cover the secondary
       "value"/heading cluster (section headings, pill/stat values,
       modal titles) that previously drifted across 0.9-1.05rem and
       1.1-1.25rem with no intentional distinction — now standardized
       on 1rem / 1.2rem across style.css, achievement.css, and stat.css.
       Display/icon/emoji sizes (1.3rem+, plus emoji-holding icon
       containers of any size) are deliberately left as component-
       specific raw values, not part of this scale — see audit H-3. */
    --text-xs:   0.62rem;
    --text-sm:   0.7rem;
    --text-base: 0.78rem;
    --text-lg:   0.85rem;
    --text-xl: 1rem;
    --text-2xl: 1.2rem;

    /* ── Z-Index Scale ── */
    --z-base: 1;
    --z-sticky: 100;
    --z-dropdown: 150;
    --z-modal: 200;
    --z-effect: 240;
    --z-toast: 300;
    --z-signup: 500;
    --z-onboarding: 600;
}