/* tokens.css — shared design system, mirrors DreamTheme in the app's Theme.swift.
   When you change a value in Theme.swift, mirror it here (and vice-versa). */
:root {
  /* accent — rgb(0.96, 0.77, 0.32) */
  --accent: #F5C452;

  /* text tints (on black) */
  --text-primary:   rgba(255, 255, 255, 0.96);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary:  rgba(255, 255, 255, 0.40);
  --hairline:       rgba(255, 255, 255, 0.10);
  --bg: #0d0d10;   /* very dark grey, not full black (shader base matches: webgl/main.glsl) */

  /* spacing — 4pt scale */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-s:   8px;
  --space-m:   12px;
  --space-l:   16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --edge:      22px;
  --edge-wide: 44px;

  /* corner radius */
  --r-bar:     4px;
  --r-card:    16px;
  --r-panel:   20px;
  --r-sheet:   26px;
  --r-overlay: 32px;

  /* type families — same faces the app bundles, self-hosted via fonts.css */
  --font-title: "Instrument Serif", Georgia, serif; /* italic = wordmark/hero */
  --font-label: "Space Grotesk", system-ui, sans-serif; /* labels, captions, nav */
  --font-body:  "Literata", Georgia, serif; /* long-form reading */
}

/* base reset + page shell shared across all pages */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;                 /* no accidental horizontal scroll on mobile */
  -webkit-text-size-adjust: 100%;     /* stop iOS Safari auto-inflating text */
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* faint starfield used on the landing hero */
.stars {
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,.5), transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity:.4 } to { opacity:.9 } }

/* the amber moon (CSS approximation of the app's shader moon) */
.moon {
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff5dd 0%, var(--accent) 45%, #b6791f 100%);
  box-shadow: 0 0 60px 12px rgba(245,196,82,.45), 0 0 140px 40px rgba(245,196,82,.18);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { transform: scale(1);    box-shadow: 0 0 60px 12px rgba(245,196,82,.45), 0 0 140px 40px rgba(245,196,82,.18); }
  50%     { transform: scale(1.03); box-shadow: 0 0 80px 18px rgba(245,196,82,.55), 0 0 180px 55px rgba(245,196,82,.24); }
}

/* Honor reduced-motion: still the ambient animations. Live WebGL medallions
   (js/medallion.js) skip the canvas themselves and leave the still fallback. */
@media (prefers-reduced-motion: reduce) {
  .moon, .stars { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ---- shared site chrome (stage 1 redesign) ---- */
.site-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-l) var(--edge); max-width: 1080px; margin: 0 auto;
}
.site-header .mark { display: inline-flex; align-items: center; gap: var(--space-s);
  font-family: var(--font-title); font-style: italic; font-size: 1.3rem; color: var(--text-primary); }
.site-header .mark:hover { text-decoration: none; }
.mark-moon { width: 1.4em; height: 1.4em; border-radius: 50%; display: block; flex: none; }
.site-header nav { display: flex; gap: var(--space-l); font-family: var(--font-label); font-size: .85rem; }
.site-header nav a { color: var(--text-secondary); }
.site-footer {
  display: flex; flex-wrap: wrap; gap: var(--space-l); justify-content: center;
  padding: var(--space-xxl) var(--edge); font-family: var(--font-label); font-size: .8rem;
}
.site-footer a, .site-footer span { color: var(--text-tertiary); }
.section { max-width: 720px; margin: 0 auto; padding: var(--space-xxl) var(--edge); }
.eyebrow { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--text-tertiary); }
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-block; font-family: var(--font-label); font-weight: 500; font-size: .95rem;
  line-height: 1.2; color: #000; background: var(--accent); border: 0; border-radius: var(--r-card);
  padding: 14px 28px; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }

/* legal / prose pages */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--edge) 96px;
}
.doc h1 { font-family: var(--font-title); font-style: italic; font-weight: 400; font-size: clamp(2rem, 6vw, 3rem); margin-bottom: var(--space-s); }
.doc .eyebrow { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--text-tertiary); }
.doc h2 { font-family: var(--font-label); font-weight: 500; font-size: 1.15rem; margin: var(--space-xxl) 0 var(--space-s); color: var(--text-primary); }
.doc p, .doc li { color: var(--text-secondary); margin-bottom: var(--space-m); }
.doc ul { padding-left: var(--space-xl); }
.doc .updated { color: var(--text-tertiary); font-family: var(--font-label); font-size: .8rem; margin-bottom: var(--space-xl); }
.doc .back { font-family: var(--font-label); font-size: .85rem; display: inline-block; margin-bottom: var(--space-xl); }