/*
 * theme.css — Bookplate's design-system values.
 *
 * A warm-paper ledger: parchment canvas, ink-dark text, a deep library-navy
 * for every filled action, an ochre wash for the rules band and a brick red
 * for fines. 2px corners, no drop shadows — surfaces meet on a hairline rule.
 */

:root {
  --canvas: #ede6d6;
  --surface: #f7f4ed;
  --surface-2: #e4dac2;
  --border: #d9cdb0;
  --border-strong: #b7a67e;
  --ink: #221f1a;
  --muted: #625e56;
  --accent: #1f3a4b;
  --accent-hover: #16303f;
  --accent-ink: #f7f4ed;
  --accent-text: #2c4a5e;
  --accent-strong: #1f3a4b;
  --accent-soft: #dbe4e6;
  --accent-border: #b9c9cc;
  --success: #2f6b3f;
  --success-ink: #ffffff;
  --success-soft: #dcead9;
  --success-strong: #1f4f29;
  --warning: #8a5a1f;
  --warning-ink: #fbf3e4;
  --warning-soft: #ecdcb8;
  --warning-strong: #6e4413;
  --danger: #8a2323;
  --danger-ink: #fbf1e4;
  --danger-soft: #f1d9d2;
  --danger-strong: #6e1414;
  --chart-1: #1f3a4b;
  --chart-2: #8a5a1f;
  --chart-3: #6e1414;
  --chart-4: #4b5320;
  --chart-5: #2f6b3f;
  --chart-6: #5b4a7c;

  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 6px 24px rgba(34, 31, 26, 0.14);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 68ch;
}

html[data-theme="dark"] {
  --canvas: #1b1712;
  --surface: #241f18;
  --surface-2: #2c261d;
  --border: #3a3226;
  --border-strong: #554935;
  --ink: #f1ebe0;
  --muted: #b7ab92;
  --accent: #6f9bb0;
  --accent-hover: #86aec1;
  --accent-ink: #12232b;
  --accent-text: #8bc0d4;
  --accent-strong: #bcdce7;
  --accent-soft: #22333b;
  --accent-border: #3a545e;
  --success: #4c8f5c;
  --success-ink: #0c1f10;
  --success-soft: #1c3322;
  --success-strong: #86c393;
  --warning: #c48a3f;
  --warning-ink: #241505;
  --warning-soft: #3a2c17;
  --warning-strong: #e0b876;
  --danger: #c0564a;
  --danger-ink: #240a07;
  --danger-soft: #3a1f1a;
  --danger-strong: #e2897c;
  --chart-1: #6f9bb0;
  --chart-2: #c48a3f;
  --chart-3: #c0564a;
  --chart-4: #96a15a;
  --chart-5: #4c8f5c;
  --chart-6: #a08fce;
}

/*
 * app.css — Bookplate's own rules: the one entrance the hero makes, and the
 * faint ruled-paper ground the whole ledger sits on. Everything else is
 * primitives and utilities.
 */

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--canvas);
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 4%, transparent) 0,
    color-mix(in srgb, var(--ink) 4%, transparent) 1px,
    transparent 1px,
    transparent 2.35rem
  );
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* THE ONE ENTRANCE (hero-only motion): rests fully visible and in place, so
   a visitor with no script, and every capture of this page, already sees it
   right — the class below only nudges it up a little further on arrival. */
.reveal {
  opacity: 1;
  transform: translateY(18px);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-inview {
  transform: none;
}
html.reduced-motion .reveal {
  transition: none;
  transform: none;
}