/* ===== TOKENS — "Material Worlds" =====
   Every color is a material from an unseen civilization.
   Full color map: docs/reference/design.md */
:root {
  /* Neutrals. These are the "earth" theme, though nothing here said so: the
     picker offers earth, white and dark, and theme.css has a block for the
     last two only. Earth is the one with no block of its own — it is what is
     left standing when neither matches, which makes it the theme a careless
     edit breaks first and the one hardest to find. The history atlas replaces
     all of this from history-profile.css; these values are what the other
     subjects show. */
  --bg:      #fffefb;
  --surf:    #f5f4f0;
  --surf-2:  #eceae4;
  --border:  #dedcd6;
  --sep:     #e7e5df;
  --text:    #1f1d3a;
  --muted:   #5d5b75;
  --faint:   #9b99ac;

  /* Brand — Cinnabar (Maya, Han China, Rome) */
  --accent:      #f43f5e;
  --accent-deep: #e23a50;
  --accent-soft: #ffe9ec;
  --accent-dark: #c22743;

  /* Support — Jade (Olmec/China), Mali Gold (Mansa Musa), Indigo (West Africa) */
  --teal:      #1fa294;
  --gold:      #f2a81d;
  --gold-soft: #ffd580;
  --amber:     #e08a00;
  --indigo:    #43449e;

  /* Semantic — certainty framework + errors */
  --cert-evidence:    var(--teal);
  --cert-likely:      var(--amber);
  --cert-speculative: #d53838;
  --danger:           #d53838;

  /* Corners. The map was already drawn to these proportions — its pane and
     its pictures at 12, its card at 20 — while everything governed by these
     tokens sat at 4 and 6, a generation sharper. Buttons, fields and panels
     now follow the same hand. */
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* Large surfaces that float over something: the card on the map, the
     settings menu, the Meanwhile sheet, the collection modal. */
  --r-card: 16px;

  /* A picture is the same shape wherever it is shown. Small pictures — list
     rows, search results, thumbnails — carry this one; a full-width picture
     in a story is its own size and keeps its own, larger, radius. */
  --r-pic:  12px;

  --sh-sm: 0 1px 3px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --sh:    0 2px 12px rgba(0,0,0,0.07), 0 4px 20px rgba(0,0,0,0.04);
  --sh-lg: 0 6px 28px rgba(0,0,0,0.09), 0 12px 44px rgba(0,0,0,0.06);

  --font:      'Outfit', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --serif:     'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mark: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  min-width: 320px;
}

body.overlay-open,
body.modal-open {
  overflow: hidden;
}

button,
select {
  font: inherit;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}