/* Design tokens — carried over from the prototype's two atmosphere
 * palettes (Espresso Dark default, Roastery Morning Light alternate),
 * switched via [data-atmosphere] the same way the source app did. */
:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --radius: 14px;
  --radius-lg: 22px;

  --bg-page: #0F0B08;
  --bg-page-secondary: #17110D;
  --bg-card: rgba(26, 19, 15, 0.85);
  --bg-card-gradient: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(36,26,20,0.75) 40%, rgba(18,13,10,0.95) 100%);
  --accent-primary: #F59E0B;
  --accent-secondary: #D97706;
  --accent-highlight: #FBBF24;
  --accent-glow: rgba(245, 158, 11, 0.35);
  --accent-glow-subtle: rgba(245, 158, 11, 0.12);
  --border-glass: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(245, 158, 11, 0.4);
  --badge-bg: rgba(245, 158, 11, 0.15);
  --badge-border: rgba(245, 158, 11, 0.35);
  --badge-text: #FBBF24;
  --text-main: #FDF8F3;
  --text-muted: #A8A29E;
  --nav-glass: rgba(15, 11, 8, 0.88);
  --nav-border: rgba(245, 158, 11, 0.2);
  --card-inner-glow: inset 0 1px 2px 0 rgba(255,255,255,0.25), inset 0 0 25px 0 rgba(245,158,11,0.15), 0 16px 36px -10px rgba(0,0,0,0.85);

  --score-good: #4c9a5b;
  --score-warn: #d4a017;
  --score-bad: #c0392b;
}

[data-atmosphere="morning_light"] {
  --bg-page: #FBF9F5;
  --bg-page-secondary: #F3EFE6;
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-gradient: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,244,237,0.9) 100%);
  --accent-primary: #D97706;
  --accent-secondary: #B45309;
  --accent-highlight: #92400E;
  --accent-glow: rgba(217, 119, 6, 0.25);
  --accent-glow-subtle: rgba(217, 119, 6, 0.08);
  --border-glass: rgba(120, 53, 15, 0.15);
  --border-accent: rgba(217, 119, 6, 0.45);
  --badge-bg: rgba(217, 119, 6, 0.12);
  --badge-border: rgba(217, 119, 6, 0.35);
  --badge-text: #92400E;
  --text-main: #1C1917;
  --text-muted: #78716C;
  --nav-glass: rgba(251, 249, 245, 0.92);
  --nav-border: rgba(217, 119, 6, 0.25);
  --card-inner-glow: inset 0 1px 2px 0 rgba(255,255,255,0.9), 0 10px 30px -5px rgba(120,53,15,0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-main);
  font-size: var(--step-0);
  line-height: 1.55;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

body.mn-front { position: relative; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
p { margin: 0 0 var(--space-4); max-width: 68ch; }
.mn-mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

.mn-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }
.mn-section { padding: var(--space-9) 0; position: relative; }
@media (max-width: 782px) { .mn-section { padding: var(--space-7) 0; } .mn-wrap { padding: 0 var(--space-4); } }

.mn-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--step--1); color: var(--accent-primary); margin-bottom: var(--space-2); display: block; }

.liquid-glass { background: var(--bg-card); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--border-glass); }

.mn-card {
  background: var(--bg-card-gradient);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  box-shadow: var(--card-inner-glow);
  border-radius: var(--radius);
  padding: var(--space-5);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease;
}
.mn-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }

.mn-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.75em 1.4em; border-radius: 999px; border: 1px solid var(--border-accent);
  background: var(--accent-primary); color: #1a1310; font-weight: 700; text-decoration: none;
  font-size: var(--step--1); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mn-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -10px var(--accent-glow); }
.mn-btn--ghost { background: transparent; color: var(--text-main); }

.mn-badge {
  display: inline-flex; align-items: center; padding: 0.3em 0.9em; border-radius: 999px;
  background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--badge-text);
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em;
}

/* Breadcrumb */
.mn-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-5); font-size: var(--step--1); color: var(--text-muted); }
.mn-crumb li:not(:last-child)::after { content: '/'; margin-left: var(--space-2); opacity: 0.5; }
.mn-crumb a { text-decoration: none; }
.mn-crumb a:hover { color: var(--accent-primary); }

/* Spec list */
.mn-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin: 0; }
.mn-spec-row { border-top: 1px solid var(--border-glass); padding-top: var(--space-2); }
.mn-spec-row dt { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 2px; }
.mn-spec-row dd { margin: 0; font-weight: 600; }

/* Score pill */
.mn-score { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-score--good { color: var(--score-good); }
.mn-score--warn { color: var(--score-warn); }
.mn-score--bad { color: var(--score-bad); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-glow); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-glow-subtle); }

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