/* GEO Reader — shared tokens, extended for the prototype.
   Pushes the existing warm editorial language further:
   - A second display serif for oversized numbers & topic labels
   - Subtly-toned paper layers with hand-drawn marks
   - Monospace for technical flourishes (word counts, tag meta)
*/

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,700;9..144,900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root, :root[data-theme="light"] {
  --paper:       #efe6d8;
  --paper-2:     #e6dac9;
  --paper-3:     #dccdb7;
  --card:        #f7f0e6;
  --card-hi:     #fbf6ec;
  --ink:         #241d1a;
  --ink-2:       #6b5f57;
  --ink-3:       #9a8e85;
  --ink-4:       #bcae9f;
  --accent:      #d65943;   /* terracotta */
  --accent-2:    #e8a798;
  --accent-3:    #b8432e;
  --accent-soft: rgba(214, 89, 67, .12);
  --ochre:       #c98a2b;   /* second accent, same chroma/lightness family */
  --ochre-soft:  rgba(201, 138, 43, .14);
  --sage:        #6d8a54;
  --sage-soft:   rgba(109, 138, 84, .14);
  --ink-mark:    rgba(36, 29, 26, .82);
  --hairline:    rgba(36, 29, 26, .10);
  --hairline-2:  rgba(36, 29, 26, .18);
  --scrim:       rgba(28, 24, 22, .40);
  --shadow-1:    0 1px 2px rgba(43, 37, 35, .05), 0 2px 6px rgba(43, 37, 35, .04);
  --shadow-2:    0 10px 30px rgba(43, 37, 35, .10);
  --shadow-3:    0 24px 60px rgba(43, 37, 35, .18);
  --r-card:      20px;
  --r-chip:      999px;
  --r-btn:       12px;
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --serif:       'Newsreader', ui-serif, 'New York', Georgia, serif;
  --display:     'Fraunces', ui-serif, Georgia, serif;
  --sans:        -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, Menlo, monospace;
}

:root[data-theme="dark"] {
  --paper:       #1c1815;
  --paper-2:     #231e1b;
  --paper-3:     #2a2521;
  --card:        #2a2522;
  --card-hi:     #332c28;
  --ink:         #f0e6da;
  --ink-2:       #c4b5a8;
  --ink-3:       #8a7e76;
  --ink-4:       #5a524c;
  --accent:      #e5735f;
  --accent-2:    #e8a798;
  --accent-3:    #ef8872;
  --accent-soft: rgba(229, 115, 95, .16);
  --ochre:       #e0a244;
  --ochre-soft:  rgba(224, 162, 68, .18);
  --sage:        #9cc07b;
  --sage-soft:   rgba(156, 192, 123, .16);
  --ink-mark:    rgba(240, 230, 218, .78);
  --hairline:    rgba(240, 230, 218, .10);
  --hairline-2:  rgba(240, 230, 218, .18);
  --scrim:       rgba(0, 0, 0, .55);
  --shadow-1:    0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2:    0 10px 40px rgba(0, 0, 0, .55);
  --shadow-3:    0 24px 60px rgba(0, 0, 0, .70);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.geo-root {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* ── Reusable pieces ─────────────────────────────────────── */
.kicker {
  font: 600 10.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.mono {
  font-family: var(--mono);
  font-feature-settings: "ss01","ss02";
  letter-spacing: -.01em;
}

.hairline { height: 1px; background: var(--hairline); }

/* Button base */
.btn {
  font: 500 13px/1 var(--sans);
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--card); border-color: var(--hairline-2); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: var(--accent-3); border-color: var(--accent-3); }
.btn.ghost { background: transparent; }
.btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.accent:hover { background: var(--accent-3); border-color: var(--accent-3); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  font: 500 11.5px/1 var(--sans);
  border: 1px solid var(--hairline);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.chip.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.ochre { background: var(--ochre-soft); color: var(--ochre); border-color: transparent; }
.chip.sage { background: var(--sage-soft); color: var(--sage); border-color: transparent; }

/* Meta hairline dividers */
.meta-sep { color: var(--ink-4); margin: 0 3px; }

/* Thin underline doodle */
.wave-underline {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

/* Torn paper edge */
.torn-edge {
  --c: var(--paper);
  --h: 10px;
  -webkit-mask-image:
    radial-gradient(var(--h) at 50% calc(100% - 1px), transparent 98%, #000 100%) 50% 100% / 24px var(--h) repeat-x,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}

/* Scrollbar polish */
.geo-root ::-webkit-scrollbar { width: 6px; height: 6px; }
.geo-root ::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; }
.geo-root ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.geo-root ::-webkit-scrollbar-track { background: transparent; }

/* Hide text selection from bleeding into colored bg */
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }

/* Grain overlay helper */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.10 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Focus ring */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--card);
}

/* Animated underline entrance */
@keyframes draw-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}