/**
 * Moon Bottle — color system + design tokens
 * Music by Brennan Smith
 *
 * Editorial folk field:
 * warm parchment · charcoal ink · olive · coastal blue · clay.
 */

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

  --mb-ivory: #faf6ee;
  --mb-parchment: #f3ece0;
  --mb-paper: #fffdf8;
  --mb-sand: #e8dfcf;
  --mb-charcoal: #2c2620;
  --mb-ink-muted: #6a6158;
  --mb-olive: #5c6b4a;
  --mb-olive-soft: #7a8668;
  --mb-olive-subtle: rgba(92, 107, 74, 0.14);
  --mb-coastal: #5a7388;
  --mb-coastal-soft: #7b93a4;
  --mb-clay: #b56a45;
  --mb-clay-deep: #934f32;
  --mb-ochre: #a9783a;

  /* Legacy cream names (mapped to parchment system) */
  --mb-moon-cream: var(--mb-ivory);
  --mb-moon-cream-panel: var(--mb-paper);
  --mb-moon-cream-input: var(--mb-ivory);
  --mb-moon-cream-deep: var(--mb-sand);

  --mb-deep-night: var(--mb-charcoal);
  --mb-deep-night-raised: #3a332c;
  --mb-deep-night-border: var(--mb-sand);

  --mb-moon-amber: var(--mb-clay);
  --mb-moon-amber-deep: var(--mb-clay-deep);
  --mb-moon-amber-muted: rgba(181, 106, 69, 0.38);
  --mb-moon-amber-subtle: rgba(181, 106, 69, 0.12);

  --mb-retro-blue: var(--mb-coastal);
  --mb-retro-blue-soft: var(--mb-coastal-soft);
  --mb-retro-blue-on-night: var(--mb-coastal);

  --mb-phosphor: var(--mb-olive);
  --mb-phosphor-muted: rgba(92, 107, 74, 0.4);

  /* --------------------------------------------------
     Role tokens
     -------------------------------------------------- */

  --mb-bg: var(--mb-parchment);
  --mb-bg-panel: var(--mb-paper);
  --mb-bg-input: var(--mb-ivory);
  --mb-bg-deep: #e4d9c8;

  --mb-surface-night: var(--mb-paper);
  --mb-surface-night-raised: var(--mb-ivory);
  --mb-ink-on-night: var(--mb-charcoal);
  --mb-ink-on-night-muted: var(--mb-ink-muted);
  --mb-border-on-night: var(--mb-sand);

  --mb-text: var(--mb-charcoal);
  --mb-text-muted: var(--mb-ink-muted);

  --mb-accent: var(--mb-clay);
  --mb-accent-deep: var(--mb-clay-deep);
  --mb-accent-muted: var(--mb-moon-amber-muted);
  --mb-accent-subtle: var(--mb-moon-amber-subtle);
  --mb-link: var(--mb-coastal);
  --mb-link-hover: var(--mb-clay);
  --mb-status: var(--mb-olive);

  --mb-border: var(--mb-sand);
  --mb-border-soft: #ddd3c2;
  --mb-highlight: var(--mb-ivory);
  --mb-button-bg: var(--mb-ivory);
  --mb-button-text: var(--mb-charcoal);
  --mb-button-primary-bg: var(--mb-clay);
  --mb-button-primary-text: #fffdf8;
  --mb-focus: var(--mb-olive);
  --mb-error: #b4554a;
  --mb-success: var(--mb-olive);

  /* Surfaces formerly used as Winamp chrome */
  --mb-metal: var(--mb-paper);
  --mb-metal-raised: var(--mb-ivory);
  --mb-metal-sunken: var(--mb-sand);
  --mb-metal-highlight: #efe6d6;
  --mb-metal-shadow: #d8cebc;
  --mb-lcd-bg: #efe6d6;
  --mb-lcd-text: var(--mb-charcoal);
  --mb-lcd-dim: var(--mb-ink-muted);
  --mb-bevel-out: 0 12px 32px rgba(44, 38, 32, 0.08);
  --mb-bevel-in: inset 0 1px 2px rgba(44, 38, 32, 0.06);
  --mb-lcd-fill: var(--mb-olive);

  /* Geometry */
  --mb-pixel: 4px;
  --mb-space-1: 8px;
  --mb-space-2: 16px;
  --mb-space-3: 24px;
  --mb-border-width: 1px;
  --mb-radius: 14px;
  --mb-radius-sm: 8px;
  --mb-shadow: 0 12px 32px rgba(44, 38, 32, 0.08);
  --mb-shadow-soft: 0 4px 16px rgba(44, 38, 32, 0.06);

  /* Type */
  --mb-font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mb-font-body: var(--mb-font-display);
  --mb-font-ui: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mb-text-xs: 0.75rem;
  --mb-text-sm: 0.875rem;
  --mb-text-md: 1rem;
  --mb-text-lg: 1.125rem;
  --mb-text-xl: 1.45rem;
  --mb-text-display: 2.15rem;
  --mb-leading-body: 1.7;
  --mb-leading-tight: 1.25;

  /* 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-coastal);
}