/* Design tokens from design/stitch/lyrical_atmospheric_exploration/DESIGN.md
   ("Lyrical Atmospheric Exploration": luminescent glassmorphism, ethereal minimalism). */

:root {
  color-scheme: dark;

  /* Neutrals: Abyssal Slate & Void Indigo */
  --void: #080b11;
  --panel: #0f1523;
  --elevation: #182033;
  --surface: #10131a;
  --surface-low: #191c22;
  --surface-container: #1d2026;
  --surface-high: #272a31;
  --surface-highest: #32353c;

  /* Brand */
  --emerald: #2eeaa3; /* primary: Bioluminescent Moss Emerald */
  --emerald-pale: #9bffcb;
  --cyan: #38e1ff; /* active resonance */
  --amber: #f5b442; /* secondary: Solar Brass Amber */
  --ochre: #d97706;
  --amethyst: #765bf7; /* tertiary */
  --cobalt: #4f85ff;
  --pearl: #fce7f3;
  --coral: #fb7185; /* critical warnings */

  /* Text contrast tiers */
  --text-strong: #f8fafc;
  --text: #e0e2eb;
  --text-muted: #94a3b8;
  --text-sealed: #475569;

  /* Hairlines */
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.15);
  --divider: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);

  /* Elevation: light and blur instead of drop shadows */
  --glass-1: rgba(8, 11, 17, 0.45); /* diegetic HUD containers */
  --glass-1-blur: blur(8px);
  --glass-2: rgba(15, 21, 35, 0.8); /* menus and overlays */
  --glass-2-blur: blur(20px);
  --glass-2-line: rgba(56, 225, 255, 0.15);
  --glass-2-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(46, 234, 163, 0.08);
  --glass-3: rgba(8, 11, 17, 0.94); /* dialogue and discoveries */
  --glass-3-blur: blur(32px);
  --glass-3-line: rgba(245, 180, 66, 0.3);
  --glass-3-shadow: 0 0 48px rgba(245, 180, 66, 0.15), 0 20px 40px rgba(0, 0, 0, 0.8);

  /* Typography */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-label-md: 0.08em;
  --tracking-label-sm: 0.12em;

  /* Shapes */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --gutter: 1.5rem;
  --margin: 3rem;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Distance of the game screen's floating controls from the edges */
  --edge: clamp(0.75rem, 2.5vw, 1.5rem);

  /* Default accent: the design system's emerald. Each universe overrides it. */
  --accent: var(--emerald);
}

@media (max-width: 767px) {
  :root {
    --gutter: 0.75rem;
    --margin: 1rem;
  }
}

/* Accent-derived tokens. They are declared again on every themed element, so they
   follow the --accent set there (a custom property is resolved where it is declared). */
:root,
[data-universe] {
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-bright: color-mix(in srgb, var(--accent) 70%, white);
}