/* ═══════════════════════════════════════════════════════════════════
   public-tokens.css
   Shared design tokens and base styles for public-facing surfaces.
   Consumed by: index.html (landing), md-viewer.html (document viewer).
   Aligns with the token naming direction in prototype/web-v1/css/tokens.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Background layers — deep alpine night ── */
  --bg-0: #080c12;
  --bg-1: #0d1420;
  --bg-2: #121d2e;
  --bg-3: #182840;

  /* ── Surface layers — frosted glass tiers ── */
  --surface-0: #0f1824cc;
  --surface-1: #152435d9;
  --surface-2: #1e3348e6;
  --surface-3: #253d55f0;

  /* ── Borders — atmospheric edges ── */
  --border-soft: #7094b22e;
  --border-medium: #93a8bc3d;
  --border-strong: #d7e6f252;
  --border-glow: #a8d4f01a;

  /* ── Text ── */
  --text-main: #eaf1f8;
  --text-dim: #a8bcce;
  --text-muted: #7a8fa2;
  --text-faint: #5a6d7e;

  /* ── Accent palette — mountain atmosphere ── */
  --accent-ice: #c8e4f5;
  --accent-ice-bright: #e0f2ff;
  --accent-mineral: #8fb5d0;
  --accent-amber: #d4a874;
  --accent-amber-warm: #e8c9a0;
  --accent-critical: #f2d4af;
  --accent-rose: #c9a0b8;
  --accent-aurora: #7fc4b8;
  --accent-summit: #f0dcc2;

  /* ── Border radius ── */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 40px;

  /* ── Shadows — layered depth ── */
  --shadow-soft: 0 8px 32px #05080d44;
  --shadow-medium: 0 16px 48px #05080d66;
  --shadow-strong: 0 30px 80px #04070ccc;
  --shadow-glow-ice: 0 0 40px #a8d4f018, 0 0 80px #a8d4f00a;
  --shadow-glow-amber: 0 0 40px #d4a87418, 0 0 80px #d4a8740a;
  --shadow-inset: inset 0 1px 0 #ffffff08;

  /* ── Spacing scale ── */
  --space-1: 0.35rem;
  --space-2: 0.65rem;
  --space-3: 1rem;
  --space-4: 1.6rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* ── Typography stacks ── */
  --serif: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --sans: "Montserrat", "Inter", "Avenir Next", "Segoe UI", Roboto, system-ui, sans-serif;

  /* ── Animation timing ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --dur-micro: 0.15s;
  --dur-short: 0.3s;
  --dur-medium: 0.6s;
  --dur-long: 1.2s;
}

* { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text-main);
  line-height: 1.5;
  background:
    radial-gradient(1400px 700px at 78% -12%, #6ea0c818, transparent 62%),
    radial-gradient(1000px 500px at 15% -6%, #d4a87414, transparent 55%),
    radial-gradient(600px 600px at 50% 60%, #182e4618, transparent 70%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 25%, var(--bg-1) 55%, var(--bg-0) 100%);
  min-height: 100vh;
}

/* Topographic grid overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.12;
  pointer-events: none;
  background-image:
    linear-gradient(#ffffff03 1px, transparent 1px),
    linear-gradient(90deg, #ffffff03 1px, transparent 1px);
  background-size: 40px 40px;
}

a { color: var(--accent-ice); text-decoration: none; transition: color var(--dur-micro) ease; }
a:hover { color: var(--accent-ice-bright); text-decoration: underline; }

/* ── Language switcher — shared between landing and md-viewer ── */
.lang-switch {
  display: inline-flex;
  gap: 0.2rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0.2rem;
  background: #0a131e99;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.lang-btn {
  font-family: var(--mono);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.54rem;
  cursor: pointer;
  transition: color var(--dur-micro) ease, background var(--dur-short) ease;
}

.lang-btn[aria-pressed='true'] {
  color: #081019;
  background: linear-gradient(120deg, var(--accent-ice), var(--accent-amber));
}

.lang-btn:focus-visible { outline: 2px solid var(--accent-ice); outline-offset: 1px; }