/*
 * theme.css — Mirik Ridge. A working tea garden's editorial palette:
 * cream paper, hairline rules, deep forest green, nothing rounded.
 */

:root {
  --canvas: #f2ede2;
  --surface: #f9f7f2;
  --surface-2: #ece5d3;
  --border: #ddd6c5;
  --border-strong: #b7ae99;
  --ink: #2b2a22;
  --muted: #605d56;
  --accent: #1f2a1e;
  --accent-hover: #162014;
  --accent-ink: #f9f7f2;
  --accent-text: #4b6b4e;
  --accent-strong: #1f2a1e;
  --accent-soft: #e3e8da;
  --accent-border: #b9c4a8;
  --success: #2f6d3c;
  --success-ink: #ffffff;
  --success-soft: #e3ecdf;
  --success-strong: #24592f;
  --warning: #96631f;
  --warning-ink: #ffffff;
  --warning-soft: #f1e6d3;
  --warning-strong: #7c5119;
  --danger: #a13b2e;
  --danger-ink: #ffffff;
  --danger-soft: #f3e0da;
  --danger-strong: #86301f;
  --chart-1: #1f2a1e;
  --chart-2: #6f8f5c;
  --chart-3: #a98544;
  --chart-4: #4c6b7a;
  --chart-5: #7a3f4a;
  --chart-6: #7c7c40;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-btn: none;
  --shadow-raised: 0 12px 32px color-mix(in srgb, var(--ink) 16%, transparent);
  --card-pad: 2rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 68ch;

  /* This app's own tokens — the two full-width bands. */
  --x-band-forest: #1a2417;
  --x-band-forest-ink: #f2ede2;
  --x-band-forest-muted: #b9c2ae;
  --x-band-sage: #e6e9da;
  --x-band-sage-ink: #2b2a22;
  --x-rule: #cdc4ab;
}

html[data-theme="dark"] {
  --canvas: #1a1812;
  --surface: #211e17;
  --surface-2: #2a261c;
  --border: #3a352a;
  --border-strong: #52493a;
  --ink: #f0ebe0;
  --muted: #b3ab9b;
  --accent: #9db88a;
  --accent-hover: #b3cb9f;
  --accent-ink: #1a2216;
  --accent-text: #9db88a;
  --accent-strong: #cddfc0;
  --accent-soft: #2a3323;
  --accent-border: #445536;
  --success: #7fbf8a;
  --success-ink: #14261a;
  --success-soft: #1c3322;
  --success-strong: #a8d9ae;
  --warning: #d9a856;
  --warning-ink: #2a1d09;
  --warning-soft: #3a2c15;
  --warning-strong: #edc482;
  --danger: #d98a78;
  --danger-ink: #2a0f09;
  --danger-soft: #3a1e18;
  --danger-strong: #f0ab9b;
  --chart-1: #9db88a;
  --chart-2: #b7cf9e;
  --chart-3: #d8b877;
  --chart-4: #8fb0bf;
  --chart-5: #c98a95;
  --chart-6: #c3c383;

  --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.45);

  --x-band-forest: #0f150d;
  --x-band-forest-ink: #f0ebe0;
  --x-band-forest-muted: #97a189;
  --x-band-sage: #262b1e;
  --x-band-sage-ink: #f0ebe0;
  --x-rule: #3a352a;
}

/*
 * app.css — Mirik Ridge's own stylesheet: what no primitive covers.
 * Compiled after theme.css and tailwind/components.css; @apply and @utility
 * work here exactly as there. Tokens only — no colour literal except black
 * or white used as depth (a translucent wash, never a fill).
 */

/* ---- The two full-width bands ------------------------------------------- */
.band-forest {
  background: var(--x-band-forest);
  color: var(--x-band-forest-ink);
}
.band-sage {
  background: var(--x-band-sage);
  color: var(--x-band-sage-ink);
}

/* ---- The newsletter's underlined ledger field ---------------------------
   Not .input: a label above a thin rule, no box, no radius. Distinct class
   so the primitive stays untouched and keeps its own fixes. */
.ledger-input {
  @apply w-full border-0 border-b bg-transparent px-0 py-2 text-base text-ink outline-none;
  border-bottom-width: 1px;
  border-color: var(--border-strong);
  border-radius: 0;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.ledger-input::placeholder { color: var(--muted); opacity: 0.7; }
.ledger-input:hover { border-color: var(--ink); }
.ledger-input:focus { border-color: var(--accent-text); }
.band-sage .ledger-input { border-color: color-mix(in srgb, var(--x-band-sage-ink) 35%, transparent); }
.band-sage .ledger-input:focus { border-color: var(--x-band-sage-ink); }
.band-sage .ledger-input::placeholder { color: color-mix(in srgb, var(--x-band-sage-ink) 60%, transparent); }

/* ---- Motion: the one grid that matters staggers in; nothing else moves. -
   Rows rest visible by default (no script, no motion, a search engine's
   read) — the pre-entrance offset only applies once app.js has confirmed it
   is running (html.js-ready) and is cleared again the moment the grid has
   entered (.is-in), or when the visitor asked for less motion. Rows carry
   their own transition-delay inline from the view, for the stagger. */
html.js-ready .stagger-grid:not(.is-in) > * {
  opacity: 0;
  transform: translateY(14px);
}
.stagger-grid > * {
  transition: opacity 480ms var(--ease-out, ease), transform 480ms var(--ease-out, ease);
}
html.reduced-motion .stagger-grid:not(.is-in) > * {
  opacity: 1;
  transform: none;
  transition: none;
}