/* ==========================================================================
   Rhizome — Colors & Type tokens
   --------------------------------------------------------------------------
   Rhizome is a tool for turning web pages into narrative books.
   It reads like a scrolling Kindle. Typography is the product; color is
   the paper it rests on. Four papers are supported:
     [data-theme="light"]   paper white   (default)
     [data-theme="sepia"]   warm cream
     [data-theme="dim"]     soft gray dark
     [data-theme="dark"]    true dark

   Naming conventions
     fg-1 / fg-2 / fg-3     foreground ramp: primary → secondary → tertiary
     bg-1 / bg-2 / bg-3     background ramp: base → raised → sunken
     line / line-strong     hairlines and dividers
     accent                 single brand accent, used sparingly
   ========================================================================== */

@import url("./fonts/fonts.css");

/* --------------------------------------------------------------------------
   1. TYPE SCALE (theme-independent)
   -------------------------------------------------------------------------- */
:root {
  --font-serif: "Spectral", "Iowan Old Style", "Palatino", "Georgia", serif;
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Reader body copy — the reason this product exists */
  --reader-size:      19px;
  --reader-leading:   1.7;
  --reader-measure:   36rem;   /* ~580px; paperback comfortable */
  --reader-tracking:  0.005em;

  /* UI type — Inter */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;

  /* Display — Spectral, for chapter openings, titles, marketing */
  --display-sm: 28px;
  --display-md: 40px;
  --display-lg: 56px;
  --display-xl: 80px;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
}

/* --------------------------------------------------------------------------
   2. SPACING / RADII / SHADOW tokens (theme-independent)
   -------------------------------------------------------------------------- */
:root {
  /* Spacing — 4px base, narrow for a utilitarian reading tool */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii — small. Rhizome avoids pillowy UI. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 999px;

  /* Elevation — quiet. Never more than 2 layers. */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in oklch, var(--accent) 35%, transparent);

  /* Duration / easing — motion is subtle fades only */
  --ease:       cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}

/* --------------------------------------------------------------------------
   3. THEME — LIGHT (default, paper white)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Foreground ramp */
  --fg-1:       oklch(18% 0.01 85);   /* near-black ink, slight warmth */
  --fg-2:       oklch(40% 0.01 85);   /* secondary */
  --fg-3:       oklch(58% 0.01 85);   /* tertiary */
  --fg-mute:    oklch(72% 0.008 85);  /* disabled, captions */
  --fg-on-accent: oklch(98% 0.003 85);

  /* Background ramp */
  --bg-1:       oklch(99% 0.002 85);  /* paper */
  --bg-2:       oklch(96.5% 0.004 85);/* raised card / sidebar */
  --bg-3:       oklch(93% 0.006 85);  /* sunken input, rail */
  --bg-hover:   oklch(95% 0.005 85);
  --bg-active:  oklch(92% 0.008 85);

  /* Lines */
  --line:        oklch(90% 0.004 85);
  --line-strong: oklch(80% 0.006 85);

  /* Accent — a muted vine green. Rhizome = rhizomatic roots. */
  --accent:        oklch(52% 0.08 150);
  --accent-hover:  oklch(46% 0.09 150);
  --accent-weak:   oklch(94% 0.03 150);

  /* Semantic */
  --danger:  oklch(52% 0.16 25);
  --warn:    oklch(68% 0.12 70);
  --success: oklch(58% 0.12 150);
  --info:    oklch(58% 0.08 240);

  /* Selection */
  --selection-bg: oklch(88% 0.08 90);
  --selection-fg: var(--fg-1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   4. THEME — SEPIA (warm cream, evening reading)
   -------------------------------------------------------------------------- */
[data-theme="sepia"] {
  --fg-1:       oklch(25% 0.02 55);
  --fg-2:       oklch(42% 0.02 55);
  --fg-3:       oklch(58% 0.02 55);
  --fg-mute:    oklch(70% 0.015 55);
  --fg-on-accent: oklch(98% 0.01 55);

  --bg-1:       oklch(94% 0.025 75);   /* cream paper */
  --bg-2:       oklch(91% 0.028 75);
  --bg-3:       oklch(88% 0.030 75);
  --bg-hover:   oklch(90% 0.028 75);
  --bg-active:  oklch(86% 0.032 75);

  --line:        oklch(83% 0.025 70);
  --line-strong: oklch(72% 0.030 65);

  --accent:        oklch(48% 0.09 40);   /* ink red-brown */
  --accent-hover:  oklch(42% 0.10 40);
  --accent-weak:   oklch(88% 0.04 55);

  --danger:  oklch(48% 0.15 25);
  --warn:    oklch(60% 0.11 70);
  --success: oklch(52% 0.10 145);
  --info:    oklch(52% 0.08 235);

  --selection-bg: oklch(84% 0.08 75);
  --selection-fg: var(--fg-1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   5. THEME — DIM (soft gray dark, less punishing than true black)
   -------------------------------------------------------------------------- */
[data-theme="dim"] {
  --fg-1:       oklch(92% 0.004 85);
  --fg-2:       oklch(75% 0.005 85);
  --fg-3:       oklch(60% 0.006 85);
  --fg-mute:    oklch(48% 0.006 85);
  --fg-on-accent: oklch(12% 0.01 85);

  --bg-1:       oklch(22% 0.005 85);
  --bg-2:       oklch(26% 0.006 85);
  --bg-3:       oklch(30% 0.006 85);
  --bg-hover:   oklch(28% 0.006 85);
  --bg-active:  oklch(32% 0.007 85);

  --line:        oklch(34% 0.006 85);
  --line-strong: oklch(44% 0.007 85);

  --accent:        oklch(75% 0.10 150);
  --accent-hover:  oklch(82% 0.10 150);
  --accent-weak:   oklch(32% 0.04 150);

  --danger:  oklch(68% 0.14 25);
  --warn:    oklch(76% 0.12 70);
  --success: oklch(72% 0.12 150);
  --info:    oklch(72% 0.10 235);

  --selection-bg: oklch(38% 0.06 90);
  --selection-fg: var(--fg-1);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   6. THEME — DARK (true dark, OLED-friendly)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --fg-1:       oklch(95% 0.003 85);
  --fg-2:       oklch(78% 0.004 85);
  --fg-3:       oklch(60% 0.005 85);
  --fg-mute:    oklch(45% 0.005 85);
  --fg-on-accent: oklch(10% 0.01 85);

  --bg-1:       oklch(10% 0.003 85);   /* near-black */
  --bg-2:       oklch(15% 0.004 85);
  --bg-3:       oklch(19% 0.005 85);
  --bg-hover:   oklch(17% 0.005 85);
  --bg-active:  oklch(22% 0.006 85);

  --line:        oklch(24% 0.006 85);
  --line-strong: oklch(36% 0.007 85);

  --accent:        oklch(78% 0.11 150);
  --accent-hover:  oklch(85% 0.10 150);
  --accent-weak:   oklch(22% 0.04 150);

  --danger:  oklch(70% 0.15 25);
  --warn:    oklch(78% 0.13 70);
  --success: oklch(74% 0.13 150);
  --info:    oklch(74% 0.10 235);

  --selection-bg: oklch(32% 0.06 90);
  --selection-fg: var(--fg-1);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   7. BASE ELEMENT STYLES — semantic defaults
   -------------------------------------------------------------------------- */
html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  line-height: 1.5;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Display / section titles — Spectral */
h1, h2, h3, .display {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: var(--display-lg); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--display-md); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: var(--display-sm); line-height: 1.25; }

/* UI titles — Inter */
h4 { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; margin: 0; }
h5 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: 600; margin: 0; }
h6 { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); margin: 0; }

p { margin: 0 0 1em 0; color: var(--fg-1); }

small, .caption {
  font-size: var(--text-xs);
  color: var(--fg-3);
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { text-decoration-color: var(--fg-1); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

/* --------------------------------------------------------------------------
   8. READER — the critical surface
   The .reader class applies the tuned body-copy styles used inside
   a book. Spectral at a generous size, comfortable measure, leading
   that invites long reading.
   -------------------------------------------------------------------------- */
.reader {
  font-family: var(--font-serif);
  font-size: var(--reader-size);
  line-height: var(--reader-leading);
  letter-spacing: var(--reader-tracking);
  color: var(--fg-1);
  max-width: var(--reader-measure);
  margin: 0 auto;
}

.reader p {
  margin: 0 0 1.2em 0;
  text-wrap: pretty;
  hyphens: auto;
  hanging-punctuation: first last;
}

.reader h2, .reader h3 {
  margin: 2em 0 0.6em;
}

.reader blockquote {
  margin: 1.6em 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--line-strong);
  color: var(--fg-2);
  font-style: italic;
}

.reader em { font-style: italic; }
.reader strong { font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   9. READER IMAGES — 16:9 figures inside .reader
   -------------------------------------------------------------------------- */
.book-img {
  margin: 2em 0;
  padding: 0;
}
.book-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.book-img figcaption {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--fg-3);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   10. UTILITY — focus ring for interactive elements
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}