/**
 * Moon Bottle — color system + design tokens
 * Music by Brennan Smith
 *
 * Full-site player chrome:
 * night metal field · phosphor LCD · amber action ·
 * retro blue links on night.
 *
 * Not neon. Not synthwave. Not cyberpunk.
 */

:root {
  /* --------------------------------------------------
     Conceptual palette
     -------------------------------------------------- */

  /* 1. Moon Cream — reading & page field */
  --mb-moon-cream: #efe9db;
  --mb-moon-cream-panel: #e5dcc8;
  --mb-moon-cream-input: #f6f1e4;
  --mb-moon-cream-deep: #d8ceb8;

  /* 2. Deep Night Blue — structure / chrome */
  --mb-deep-night: #1a2433;
  --mb-deep-night-raised: #243044;
  --mb-deep-night-border: #3d4f6a;

  /* 3. Moon Amber / Ochre — action & selection */
  --mb-moon-amber: #b07d2a;
  --mb-moon-amber-deep: #8a6420;
  --mb-moon-amber-muted: rgba(176, 125, 42, 0.38);
  --mb-moon-amber-subtle: rgba(176, 125, 42, 0.14);

  /* 4. Retro Blue — links, metadata, small details */
  --mb-retro-blue: #2f5f8f;
  --mb-retro-blue-soft: #4a7399;
  --mb-retro-blue-on-night: #8bb0d4;

  /* 5. Phosphor Green — playback / status only */
  --mb-phosphor: #5f8f4a;
  --mb-phosphor-muted: rgba(95, 143, 74, 0.4);

  /* --------------------------------------------------
     Role tokens (use these in components)
     -------------------------------------------------- */

  /* Page field — metal (full-site player) */
  --mb-bg: var(--mb-metal-sunken);
  --mb-bg-panel: var(--mb-metal);
  --mb-bg-input: var(--mb-metal-raised);
  --mb-bg-deep: #0e141c;

  /* Night surfaces */
  --mb-surface-night: var(--mb-metal);
  --mb-surface-night-raised: var(--mb-metal-raised);
  --mb-ink-on-night: var(--mb-moon-cream);
  --mb-ink-on-night-muted: #a7b2c2;
  --mb-border-on-night: var(--mb-metal-highlight);

  /* Ink on metal */
  --mb-text: var(--mb-moon-cream);
  --mb-text-muted: var(--mb-ink-on-night-muted);

  /* Accents */
  --mb-accent: var(--mb-moon-amber);
  --mb-accent-deep: var(--mb-moon-amber-deep);
  --mb-accent-muted: var(--mb-moon-amber-muted);
  --mb-accent-subtle: var(--mb-moon-amber-subtle);
  --mb-link: var(--mb-retro-blue-on-night);
  --mb-link-hover: var(--mb-moon-amber);
  --mb-status: var(--mb-phosphor);

  /* Chrome on metal */
  --mb-border: var(--mb-metal-shadow);
  --mb-border-soft: var(--mb-metal-highlight);
  --mb-highlight: var(--mb-metal-raised);
  --mb-button-bg: var(--mb-metal-raised);
  --mb-button-text: var(--mb-moon-cream);
  --mb-button-primary-bg: var(--mb-moon-amber);
  --mb-button-primary-text: var(--mb-deep-night);
  --mb-focus: var(--mb-moon-amber);
  --mb-error: #d07070;
  --mb-success: var(--mb-phosphor);

  /* Winamp chrome */
  --mb-metal: #1c2634;
  --mb-metal-raised: #2a3648;
  --mb-metal-sunken: #121820;
  --mb-metal-highlight: #4a5d75;
  --mb-metal-shadow: #0c1016;
  --mb-lcd-bg: #07090c;
  --mb-lcd-text: var(--mb-phosphor);
  --mb-lcd-dim: rgba(95, 143, 74, 0.42);
  --mb-bevel-out:
    inset 1px 1px 0 var(--mb-metal-highlight),
    inset -1px -1px 0 var(--mb-metal-shadow);
  --mb-bevel-in:
    inset 1px 1px 0 var(--mb-metal-shadow),
    inset -1px -1px 0 var(--mb-metal-highlight);
  --mb-lcd-fill: repeating-linear-gradient(
    90deg,
    var(--mb-phosphor) 0 3px,
    transparent 3px 5px
  );

  /* Geometry */
  --mb-pixel: 4px;
  --mb-space-1: 8px;
  --mb-space-2: 16px;
  --mb-space-3: 24px;
  --mb-border-width: 2px;
  --mb-radius: 0;

  /* Type — player UI throughout */
  --mb-font-ui: "IBM Plex Mono", "Consolas", "Courier New", ui-monospace, monospace;
  --mb-font-body: var(--mb-font-ui);
  --mb-text-xs: 0.75rem;
  --mb-text-sm: 0.875rem;
  --mb-text-md: 1rem;
  --mb-text-lg: 1.125rem;
  --mb-text-xl: 1.35rem;
  --mb-text-display: 1.65rem;
  --mb-leading-body: 1.65;
  --mb-leading-tight: 1.3;

  /* Legacy aliases */
  --bg-primary: var(--mb-bg);
  --bg-secondary: var(--mb-bg-panel);
  --text-primary: var(--mb-text);
  --text-secondary: var(--mb-text-muted);
  --border: var(--mb-border-soft);
  --accent: var(--mb-accent);
  --accent-muted: var(--mb-accent-muted);
  --accent-subtle: var(--mb-accent-subtle);
  --logo-glow: transparent;
  --logo-blue: var(--mb-retro-blue);
}