/* tokens.css — the design tokens style.css consumes.

   In the SolarFleet build these came from that site's /page/shell.css, which
   also carried its masthead and starfield. This app is standalone, so the
   tokens live here and the site chrome is gone.

   The `--mu-*` properties are the themeable surface: theme.js sets them per
   project at boot, and everything below derives from them, so a project theme
   reaches the whole UI without touching style.css. */

:root {
    /* Per-project, overwritten by theme.js. These defaults are SolarFleet's,
       so the app renders correctly even if theming never runs. */
    --mu-accent: #5ec8ff;
    --mu-accent-ink: #04121c;
    --mu-bg: #05060a;
    --mu-panel: #0b0e16;
    --mu-glow: radial-gradient(1200px 600px at 70% -10%, #122440 0%, #05060a 60%);

    /* Structural tokens, inherited from the original shell. */
    --void: var(--mu-bg);
    --text: #e8eaed;
    --label: #6e7479;
    --blurb: #9aa0a6;
    --line: var(--mu-accent);
    --rule: rgba(232, 234, 237, 0.16);
    --focus: var(--mu-accent);
    --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --edge: clamp(20px, 4.4vw, 64px);
    --tap: 44px;          /* mobile hit target floor — do not shrink */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--mu-bg);
    background-image: var(--mu-glow);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--display);
    -webkit-font-smoothing: antialiased;
    /* Safe areas: the player bar sits on the bottom edge on phones. */
    padding-bottom: env(safe-area-inset-bottom);
}

button, input {
    font-family: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}