/* ============================================================
   base.css: the first of Starforge's stylesheets
   Self-hosted faces, :root tokens (type, structure, Nebula palette,
   breakpoint scale), reset, font profiles, type utilities, page header.
   templates/game/base.html links every static/css/<area>.css in
   cascade order; a later file wins a tie, so keep that order
   (static/CLAUDE.md).
   ============================================================ */

/* Self-hosted faces: font-src is 'self', no external CDNs. See
   static/fonts/README.md. Selectable UI faces live in user-fonts.css. */
@font-face {
    font-family: 'Unbounded';
    src: url("../fonts/unbounded-vf.8616dc355070.woff2") format('woff2-variations');
    font-weight: 300 800;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url("../fonts/space-grotesk-500.ab4861869c91.woff2") format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url("../fonts/space-grotesk-700.f9e147a59a93.woff2") format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Space Mono';
    src: url("../fonts/space-mono-400.049dfc5919c2.woff2") format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Space Mono';
    src: url("../fonts/space-mono-700.e5e908997a45.woff2") format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    /* ---- Type roles ---- */
    --font-display: 'Unbounded', 'Space Grotesk', system-ui, sans-serif;
    --font-heading: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Space Mono', ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
    --font-body-size: 1rem;
    --font-body-line-height: 1.55;
    --font-heading-letter-spacing: -0.01em;

    /* ---- Structural tokens (shared across every theme) ---- */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* ---- Dice-face palette (Incursions): semantic, theme-invariant ----
       A red die is red in every palette, same reasoning as --dice-*-text below,
       which these sit alongside rather than replace: *-text is a contrast ink for
       small labels, these are the fill colors the die chips themselves use. */
    --dice-red: #e5573c;
    --dice-green: #4bc46a;
    --dice-blue: #4a9df0;
    --dice-gold: #f2c14e;
    /* Glass (Resonance Cache's persistent reserve die) is a fifth semantic pip colour,
       same fixed-hex-in-every-theme treatment as the four above: a literal match for
       this game's violet identity (--color-violet's Legacy default), not bound to that
       variable, since a themed --color-violet would make the pip disagree with itself
       between Aurora and Frontier the way red/green/blue/gold never do. */
    --dice-glass: #7c5cff;
    --radius-xl: 22px;
    --radius-pill: 999px;

    --header-height: 62px;
    /* Height of .mobile-tabbar EXCLUDING its safe-area padding, which callers add
       themselves. Anything that anchors above the bottom navigation, or that scrolls itself
       clear of it, reads this rather than hardcoding a number that drifts when the bar
       changes. The incursion board uses it for scroll-margin-bottom.

       MEASURED IN A BROWSER, not derived from the bar's own padding: 79px at 320, 390 and
       768 with the safe-area inset reporting 0. If .mobile-tabbar's padding or font sizing
       changes, re-measure this rather than recomputing it. */
    --tabbar-height: 79px;
    --modal-overlay: rgba(6, 3, 12, 0.62);

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.38);
    --shadow-lg: 0 18px 48px rgba(0,0,0,0.50);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.18s;
    /* Wider companions to --dur, for new work only: the ~50 existing transition:
       declarations in this file mostly predate these and are not being retrofitted. */
    --dur-fast: 0.12s;
    --dur-slow: 0.4s;

    /* ---- Type scale (--font-size-*, not --text-*: that prefix already names the
       color tokens below, per theme). New UI only: the ~15 distinct font-size values
       already in this file were each picked by hand across dozens of feature passes,
       several legitimately dense (staff tables), and are not being retrofitted onto
       this scale. Reach for these on anything new instead of adding a 16th. */
    --font-size-xs: 0.72rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: 1.4rem;

    /* ---- z-index scale. Additive only: the ~40 existing z-index declarations in
       this file are untouched (several already sit at these exact values by
       convention, e.g. modals at 9990), so nothing here changes current layout.
       New overlays should reach for a name instead of a fresh guess. */
    --z-raised: 1;      /* a card/row lifting off its own surface */
    --z-sticky: 100;    /* sticky headers, in-page sticky rails */
    --z-dropdown: 200;  /* dropdowns, popovers, inline menus */
    --z-drawer: 1000;   /* the nav drawer, off-canvas panels */
    --z-modal: 9990;    /* modal dialogs */
    --z-toast: 9999;    /* toasts: must always beat a modal */
    --z-top: 10000;     /* the one or two things that must never be covered */

    /* ---- Breakpoint scale (documentation only: CSS custom properties can't be
       used inside @media conditions, so these values must be typed literally in
       each query; this is the single source of truth for which number to type).
       Three tiers, structural swaps at exactly two lines:
         --bp-sm   768px  phone → tablet: content grids go two-column (dashboard,
                          star map, create-pet workbench). Nav stays the bottom
                          tab bar + "More" drawer: content is full width here, so
                          the wider grids never fight a sidebar for space.
         --bp-md  1024px  tablet → desktop: the sidebar rail replaces the bottom
                          tab bar. Content is now sidebar + ~≥768px, which still
                          fits every two-column grid, so nothing reflows awkwardly.
       (600px is a sub-line, not structural: the header condenses; weather + name
       hide, currency pills shrink.) Component-internal card-grid reflows (3→2→1)
       may use intermediate values (480/700/etc.). Content column caps at 1100px.
       See docs/frontend-guide.md. */

    /* ============================================================
       DEFAULT PALETTE: Deep-Field Observatory (Nebula, dark)
       aubergine/petrol depths · bioluminescent teal · coral reward
       Glow is reserved for earned/actionable states only.
       ============================================================ */
    --color-primary: #37e0c0;        /* bioluminescent teal; actions, links, focus */
    --color-primary-dark: #22b89e;   /* deeper teal; hover */
    --color-violet: #7c5cff;         /* nebula mid */
    --color-reward: #ff6b8a;         /* coral; earned / reward moments only */
    --gradient-primary: linear-gradient(120deg, #37e0c0 0%, #7c5cff 52%, #ff6b8a 100%);
    --glow-reward: 0 0 0 1px rgba(255,107,138,0.42), 0 0 26px rgba(255,107,138,0.32);
    --glow-accent: 0 0 24px rgba(55,224,192,0.28);

    --bg-body: #140b1e;              /* deep aubergine */
    --bg-surface: #1e1330;           /* raised plum panel */
    --bg-subtle: #180e26;            /* recessed */
    --bg-hover: #281a3e;
    --bg-elevated: #241638;          /* dropdowns / popovers */
    --bg-cool: #0e1b28;              /* petrol; observatory / weather zones */

    --text-primary: #f3ecff;         /* starlight */
    --text-secondary: #b9aad4;
    /* Raised from #897ba8, which cleared 4.5:1 on --bg-body but sat at 4.18 on
       --bg-hover and 4.38 on --bg-elevated: i.e. it failed on exactly the raised
       surfaces muted text most often lands on (dropdowns, popovers, hovered rows).
       Every theme's token is now tuned against its OWN worst background, with a little
       headroom (~4.8) so a nested surface tint can't push an instance back under. Check
       per theme: these are set on body.theme-*, so reading them off documentElement
       returns base defaults and makes every theme look identical. */
    --text-muted: #9386af;
    --text-inverse: #140b1e;         /* text on bright accents */

    --border-color: #33244a;
    --border-subtle: #251838;

    /* Signature backdrop is now flat + a faint corner vignette (grain/nebula
       retired). Depth comes from panels, the accent-hairline motif, and
       reward-glow: not a busy background. Fixed, so it never scrolls. Light
       themes soften this to a barely-there wash. */
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(4,2,12,0.28) 100%);

    /* ---- Semantic (retuned; UI always pairs these with a label/icon) ---- */
    --color-success: #35d39a;
    --color-success-ink: #35d39a;
    --color-success-bg: #0f2b23;
    --color-success-text: #7ff0ce;
    --color-success-border: #1f6a55;

    --color-error: #f2596a;
    --color-error-ink: #f2596a;
    --color-error-bg: #351019;
    --color-error-text: #ffb3bd;
    --color-error-border: #7c2230;

    --color-warning: #f2b34b;
    --color-warning-ink: #f2b34b;
    --color-warning-bg: #33260c;
    --color-warning-text: #ffe0a3;
    --color-warning-border: #8a6414;

    --color-info: #56c7e6;
    --color-info-ink: #56c7e6;
    --color-reward-ink: #ff6b8a;
    --color-info-bg: #0c2733;
    --color-info-text: #a7e2f2;
    --color-info-border: #1c5f74;

    color-scheme: dark;
}

/* ===== RESET ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    /* Flat body with a faint fixed corner vignette for quiet depth: the
       backdrop is deliberately calm; the design's signature lives in the
       panels, hairlines, and reward-glow, not here. */
    background-color: var(--bg-body);
    background-image: var(--vignette);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-primary);
    font-size: var(--font-body-size);
    line-height: var(--font-body-line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--dur) ease, color var(--dur) ease;
}
h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: var(--font-heading-letter-spacing);
    color: var(--text-primary);
}

/* Selectable interface font profiles. Display and mono remain Starforge's
   authored identity; body and ordinary headings follow the Captain's choice.
   These size and rhythm values are calibration starting points, not additional
   user controls. */
body.font-system {
    --font-body-size: 1rem;
    --font-body-line-height: 1.55;
}
body.font-nunito {
    --font-body: 'Nunito', system-ui, sans-serif;
    --font-heading: 'Nunito', system-ui, sans-serif;
    --font-body-size: 1rem;
    --font-body-line-height: 1.58;
    --font-heading-letter-spacing: -0.015em;
}
body.font-lora {
    --font-body: 'Lora', Georgia, serif;
    --font-heading: 'Lora', Georgia, serif;
    --font-body-size: 1.02rem;
    --font-body-line-height: 1.62;
    --font-heading-letter-spacing: 0;
}
body.font-opendyslexic {
    --font-body: 'Open-Dyslexic', system-ui, sans-serif;
    --font-heading: 'Open-Dyslexic', system-ui, sans-serif;
    --font-body-size: 1rem;
    --font-body-line-height: 1.65;
    --font-heading-letter-spacing: 0;
}
body.font-space-grotesk {
    --font-body: 'Space Grotesk', system-ui, sans-serif;
    --font-heading: 'Space Grotesk', system-ui, sans-serif;
    --font-body-size: 1rem;
    --font-body-line-height: 1.55;
    --font-heading-letter-spacing: -0.015em;
}
body.font-exo-2 {
    --font-body: 'Exo 2', system-ui, sans-serif;
    --font-heading: 'Exo 2', system-ui, sans-serif;
    --font-body-size: 1.01rem;
    --font-body-line-height: 1.58;
    --font-heading-letter-spacing: 0;
}
body.font-quantico {
    --font-body: 'Quantico', system-ui, sans-serif;
    --font-heading: 'Quantico', system-ui, sans-serif;
    --font-body-size: 1rem;
    --font-body-line-height: 1.62;
    --font-heading-letter-spacing: 0;
}
body.font-cormorant-garamond {
    --font-body: 'Cormorant Garamond', Georgia, serif;
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body-size: 1.08rem;
    --font-body-line-height: 1.58;
    --font-heading-letter-spacing: 0;
}
a { color: var(--color-primary); text-decoration: none; }
@media (hover: hover) { a:hover { text-decoration: underline; } }

/* Type-system utilities. .eyebrow + .mono give the "instrument readout" texture
   used for currencies, timers, coordinates, and section kickers. */
.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Standard page-header block: replaces bare <h1> so every page reads as one
   designed surface: mono eyebrow, display title, optional right-aligned actions. */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.page-header__titles { min-width: 0; }
.page-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.45rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.04;
    margin: 6px 0 0;
}
/* A page title given tabindex="-1" as a post-swap focus target (the incursion board's
   #board-heading): same reasoning as .room-card:focus. */
.page-title:focus { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.page-subtitle { color: var(--text-secondary); margin: 8px 0 0; max-width: 62ch; }
.page-header__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* A consequence note sitting with a destructive header action. Takes the full row so it
   reads as a sentence under the buttons rather than a third chip beside them. */
.page-header__note { flex: 1 0 100%; margin: 0; }

/* Vertical rhythm for stacked panels/sections. */
.stack { display: flex; flex-direction: column; gap: 18px; }