/* dip.ink — design system, per DESIGN.md (canonical spec at repo root)
   Replaces stone-and-rose Tailwind defaults with a literary-imprint system:
   one font family (Newsreader) across display + body, three author signatures,
   warm dark "Dusk" mode default, cream "Paper" alternate, sharp corners,
   minimal motion. Loaded via <link> in src/web/layout.ts.

   Tailwind v4 browser runtime (loaded as <script>) reads @theme below to
   override its built-in palette so existing utility classes (bg-stone-950,
   text-stone-100, border-stone-800, text-rose-100/200/300, bg-rose-700,
   border-rose-700, text-amber-300, bg-emerald-950/30) inherit our tokens
   without rewriting every template. Pages can also use the semantic classes
   defined further down for the bits Tailwind can't easily express. */

/* ── Webfonts: Newsreader (variable, optical-size) + Inter Tight + JetBrains Mono ── */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Inter+Tight:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ── Tailwind v4 theme overrides ────────────────────────────────────────
   Maps Tailwind's stone/rose/emerald/amber color names to our palette so
   that existing utility classes in pages.ts pick up the new system without
   needing a wholesale rewrite. */
@theme {
  /* The "ink + paper" base — replaces stone */
  --color-stone-50:  #FAF6EC;
  --color-stone-100: #F5EFE3;
  --color-stone-200: #E5DDC9;
  --color-stone-300: #C9BEA5;
  --color-stone-400: #A89B86;
  --color-stone-500: #8A7C66;
  --color-stone-600: #6B5E47;
  --color-stone-700: #4A3F30;
  --color-stone-800: #2E2820;
  --color-stone-900: #1C1814;
  --color-stone-950: #14110E;

  /* Author accents replace the default rose/amber/emerald — these are
     used implicitly when templates write `text-rose-100`, `bg-rose-700`,
     etc. We aim them at a unified literary palette so pages that haven't
     been migrated still inherit the right register. */
  --color-rose-50:  #F8EBE0;
  --color-rose-100: #F5EFE3;     /* nav text — was Tailwind rose-100 */
  --color-rose-200: #E5C99A;     /* wordmark accent — was bright rose */
  --color-rose-300: #B8902F;     /* gilt — secondary accent */
  --color-rose-400: #B8902F;
  --color-rose-500: #A53232;
  --color-rose-600: #A53232;     /* primary CTA bg — was bright rose-600 */
  --color-rose-700: #8C2A2A;     /* primary CTA bg hover-rest — oxblood */
  --color-rose-800: #4A3F30;
  --color-rose-900: #2E2820;
  --color-rose-950: #221E18;

  --color-amber-200: #E5C99A;
  --color-amber-300: #B8902F;    /* star ratings stay gilt */

  --color-emerald-200: #C8B89A;
  --color-emerald-700: #6B5E47;
  --color-emerald-800: #4A3F30;
  --color-emerald-950: #1C1814;
}

/* ── Color tokens (CSS custom properties, mode-switchable) ─────────────── */
:root,
[data-mode="dark"] {
  --ink-base:    #14110E;
  --ink-surface: #1C1814;
  --ink-card:    #221E18;
  --paper:       #F5EFE3;
  --paper-dim:   #A89B86;
  --paper-faint: #6B5E47;
  --rule:        #2E2820;
  --rule-bright: #4A3F30;

  --crown:  #B8902F;
  --hearth: #B26A3F;
  --ember:  #A53232;

  --reading-measure: 38em;
  --card-measure:    48em;

  --type-display: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --type-body:    "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --type-ui:      "Inter Tight", "Inter", system-ui, sans-serif;
  --type-mono:    "JetBrains Mono", ui-monospace, monospace;
}

[data-mode="light"] {
  --ink-base:    #FAF6EC;
  --ink-surface: #F2EBDC;
  --ink-card:    #ECE3D0;
  --paper:       #1F1B17;
  --paper-dim:   #6B5E47;
  --paper-faint: #9C8E76;
  --rule:        #D9CFB8;
  --rule-bright: #BFB29A;
  --crown:  #8C6A1C;
  --hearth: #8C5A3A;
  --ember:  #8C2A2A;
}

/* ── Author accent inheritance ─────────────────────────────────────────────
   Any element with data-author="<slug>" exposes --author-accent so descendants
   (rules, drop caps, signature names, badges) pick up the right color without
   per-author CSS branches everywhere. */
[data-author="crown-and-shadow"] { --author-accent: var(--crown);  }
[data-author="hearth-thistle"]   { --author-accent: var(--hearth); }
[data-author="ember-wraith"]     { --author-accent: var(--ember);  }

/* ── Base reset + body ─────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink-base);
  color: var(--paper);
  font-family: var(--type-body);
  font-optical-sizing: auto;
  font-feature-settings: "kern", "liga", "onum";
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: inherit; }

/* Tailwind's `font-serif` utility now points at Newsreader display optical size */
.font-serif {
  font-family: var(--type-display);
  font-optical-sizing: auto;
}

/* ── The wordmark ──────────────────────────────────────────────────────── */
.app-mark {
  font-family: var(--type-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ── Top nav ───────────────────────────────────────────────────────────── */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--ink-base) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.app-nav-link {
  font-family: var(--type-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
}
.app-nav-link:hover { color: var(--paper); }

/* ── Mode toggle ───────────────────────────────────────────────────────── */
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.mode-toggle button {
  background: transparent;
  border: 0;
  color: var(--paper-dim);
  padding: 4px 12px;
  font-family: var(--type-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.mode-toggle button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink-base);
}

/* ── UI eyebrow / metadata text ────────────────────────────────────────── */
.ui-label {
  font-family: var(--type-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.ui-meta {
  font-family: var(--type-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
}
.ui-mono {
  font-family: var(--type-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Author signatures ─────────────────────────────────────────────────── */
.author-name { font-family: var(--type-display); }

[data-author="crown-and-shadow"] .author-name {
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--crown);
}
[data-author="hearth-thistle"] .author-name {
  font-style: italic;
  font-weight: 500;
  color: var(--hearth);
}
[data-author="ember-wraith"] .author-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ember);
}

/* Inline author-name links inside attribution lines should still take the
   author signature, just smaller. */
.attribution [data-author] .author-name { font-size: 0.92em; }

/* ── Story card ────────────────────────────────────────────────────────── */
.story-card {
  display: block;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.story-card:first-of-type { border-top: 0; }
.story-card:hover { background: color-mix(in srgb, var(--ink-surface) 50%, transparent); }
.story-card .stage {
  font-family: var(--type-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--author-accent, var(--paper-faint));
  margin-bottom: 8px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.story-card .stage::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.story-card.completed .stage,
.story-card[data-status="completed"] .stage { color: var(--paper-dim); }
.story-card.drafting .stage,
.story-card[data-status="drafting"] .stage { color: var(--paper-faint); }
.story-card .title {
  font-family: var(--type-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.story-card .by {
  font-family: var(--type-display);
  font-size: 13px;
  color: var(--paper-dim);
  margin: 0 0 10px;
}
.story-card .first-line {
  font-family: var(--type-body);
  font-size: 15px;
  font-style: italic;
  line-height: 1.55;
  color: var(--paper-dim);
  margin: 0 0 10px;
}
.story-card .meta {
  font-family: var(--type-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  font-variant-numeric: tabular-nums;
}

/* ── Stage badges (existing call site in layout.ts) ───────────────────── */
.stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--type-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--author-accent, var(--paper-dim));
}
.stage-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.stage-badge.completed { color: var(--paper-dim); }
.stage-badge.drafting  { color: var(--paper-faint); }

/* ── Tabs (Active / Library / Authors) ─────────────────────────────────── */
.tab-btn {
  font-family: var(--type-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  padding: 4px 0;
  margin-right: 24px;
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tab-btn[aria-current="true"] {
  color: var(--paper);
  border-bottom-color: var(--paper);
  background: transparent;
}

/* ── Author profile heading ────────────────────────────────────────────── */
.author-profile-header {
  text-align: center;
  padding: 32px 0 8px;
}
.author-profile-header .author-name {
  font-size: 36px;
  margin: 0 0 12px;
}
.author-profile-header .accent-rule {
  display: block;
  width: 48px;
  height: 1px;
  margin: 0 auto 12px;
  background: var(--author-accent, var(--rule-bright));
}
.author-profile-header .sub-vibe {
  font-family: var(--type-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0 0 16px;
}
.author-profile-header .author-blurb {
  font-family: var(--type-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--paper-dim);
  max-width: 32ch;
  margin: 0 auto;
}

/* ── Follow button ─────────────────────────────────────────────────────── */
.follow-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 20px;
  border: 1px solid var(--rule-bright);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-family: var(--type-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.follow-btn:hover { border-color: var(--paper); }
.follow-btn[data-followed="true"] {
  background: var(--ink-surface);
  border-color: var(--author-accent, var(--rule-bright));
  color: var(--author-accent, var(--paper));
}

/* ── Primary CTA (start / continue / recover submit) ───────────────────── */
.primary-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
  border-radius: 0;
  font-family: var(--type-display);
  font-size: 17px;
  font-style: italic;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.primary-btn:hover {
  background: var(--paper);
  color: var(--ink-base);
}

/* ── Chapter reader ────────────────────────────────────────────────────── */
.reader {
  max-width: var(--reading-measure);
  margin-left: auto;
  margin-right: auto;
}
.reader .chapter-meta {
  font-family: var(--type-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  text-align: center;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.reader .chapter-title {
  font-family: var(--type-display);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.reader .chapter-author {
  font-family: var(--type-display);
  font-size: 13px;
  text-align: center;
  margin: 0 0 0;
  color: var(--paper-dim);
}
.reader article {
  max-width: var(--reading-measure);
  margin: 0 auto;
}
.reader article p {
  font-family: var(--type-body);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 1em;
  hyphens: auto;
  text-wrap: pretty;
}
.reader article .paragraph:first-child > p:first-child::first-letter {
  font-family: var(--type-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 0.85;
  float: left;
  padding: 6px 10px 0 0;
  color: var(--author-accent, var(--paper));
}

.fleuron {
  text-align: center;
  font-family: var(--type-display);
  font-size: 18px;
  color: var(--paper-faint);
  margin: 16px 0 24px;
  letter-spacing: 0.4em;
}

.paragraph {
  position: relative;
  scroll-margin-top: 4rem;
  border-radius: 2px;
  transition: background 0.6s ease;
}
.paragraph[data-reaction-flash="true"] {
  background: color-mix(in srgb, var(--author-accent, var(--paper)) 18%, transparent);
}

/* Reaction strip */
.reaction-strip {
  display: flex;
  gap: 8px;
  margin: 4px 0 16px;
  transition: opacity 0.2s ease;
}
@media (hover: hover) {
  .reaction-strip { opacity: 0; }
  .paragraph:hover .reaction-strip,
  .paragraph:focus-within .reaction-strip { opacity: 0.9; }
}
.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--paper-dim);
  border-radius: 999px;
  font-family: var(--type-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.reaction-btn:hover { border-color: var(--paper-dim); color: var(--paper); }
.reaction-btn[data-active="true"] {
  border-color: var(--author-accent, var(--paper));
  color: var(--author-accent, var(--paper));
  opacity: 1;
}

/* ── Choice buttons ────────────────────────────────────────────────────── */
.choices { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); }
.choices .ui-label { display: block; text-align: center; margin-bottom: 16px; }
.choice-btn {
  display: block;
  width: 100%;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: transparent;
  border: 1px solid var(--rule-bright);
  border-radius: 0;
  font-family: var(--type-display);
  font-size: 16px;
  font-style: italic;
  line-height: 1.4;
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.choice-btn:hover {
  border-color: var(--author-accent, var(--paper));
  background: color-mix(in srgb, var(--ink-surface) 50%, transparent);
}
.choice-btn:active { transform: scale(0.99); }
.choice-btn .choice-eyebrow {
  display: block;
  font-family: var(--type-ui);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 4px;
}

/* ── Chapter-rating block (yes / mid / no) ─────────────────────────────── */
.chapter-rating {
  margin-top: 32px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
}
.chapter-rating p {
  font-family: var(--type-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
  margin: 0 0 12px;
}
.rating-btn {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--paper);
  padding: 6px 14px;
  margin-right: 8px;
  font-family: var(--type-ui);
  font-size: 12px;
  cursor: pointer;
  border-radius: 999px;
}
.rating-btn:hover { border-color: var(--author-accent, var(--paper)); }
.rating-btn[data-active="true"] {
  border-color: var(--author-accent, var(--paper));
  color: var(--author-accent, var(--paper));
  background: color-mix(in srgb, var(--ink-surface) 60%, transparent);
}

/* ── Story rating (5-star) ─────────────────────────────────────────────── */
.star-btn {
  background: transparent;
  border: 0;
  color: var(--paper-faint);
  font-size: 32px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
}
.star-btn:hover { opacity: 1; }
.star-btn[data-active="true"] { opacity: 1; color: var(--crown); }

/* ── Recover form ──────────────────────────────────────────────────────── */
.recover-input {
  width: 100%;
  background: var(--ink-surface);
  border: 1px solid var(--rule-bright);
  color: var(--paper);
  font-family: var(--type-mono);
  font-size: 18px;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 14px 16px;
  border-radius: 0;
  outline: none;
  text-transform: uppercase;
}
.recover-input:focus { border-color: var(--paper); }

/* ── Locked / brewing chapter ──────────────────────────────────────────── */
.brewing-card {
  text-align: center;
  padding: 32px 0;
}
.brewing-card .chapter-title {
  font-family: var(--type-display);
  font-style: italic;
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--paper);
}
.brewing-card .countdown {
  font-family: var(--type-mono);
  font-variant-numeric: tabular-nums;
  color: var(--author-accent, var(--paper));
}

/* ── Done / end-of-story page ──────────────────────────────────────────── */
.done-card { text-align: center; padding: 48px 0; }
.done-card .end-mark {
  font-family: var(--type-display);
  font-style: italic;
  color: var(--paper-faint);
  font-size: 14px;
  letter-spacing: 0.2em;
  margin: 16px 0 32px;
  text-transform: uppercase;
}

/* ── Hairline rules helper ─────────────────────────────────────────────── */
.rule-h { display: block; height: 1px; background: var(--rule); border: 0; margin: 24px 0; }

/* ── Misc utilities still used by templates ────────────────────────────── */
.line-clamp-2 { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }
.line-clamp-3 { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }