/*
 * theme.css — BillEasy's design-system values.
 * Mood: swiss ledger — paper cream ground, hairline rule borders, square
 * corners, no shadow, one ink spent sparingly: a warm red for links, the
 * paid mark and the recommended plan. Space Grotesk for display, IBM Plex
 * Sans for body, IBM Plex Mono for figures (invoice numerals, prices).
 */

:root {
  --canvas: #f3f2ee;
  --surface: #faf9f7;
  --surface-2: #eae7de;
  --border: #ddd9cd;
  --border-strong: #b3ad9c;
  --ink: #1c1b16;
  --muted: #61605b;
  --accent: #14161a;
  --accent-hover: #2b2d31;
  --accent-ink: #f3f2ee;
  --accent-text: #b23b1d;
  --accent-strong: #14161a;
  --accent-soft: #f4e2da;
  --accent-border: #e0b7a8;
  --success: #2f6b3e;
  --success-ink: #ffffff;
  --success-soft: #e3ece2;
  --success-strong: #2a5f37;
  --warning: #8a5a17;
  --warning-ink: #ffffff;
  --warning-soft: #f0e6d3;
  --warning-strong: #7c4f14;
  --danger: #a3341c;
  --danger-ink: #ffffff;
  --danger-soft: #f4ded7;
  --danger-strong: #8f2c17;
  --chart-1: #14161a;
  --chart-2: #b23b1d;
  --chart-3: #61605b;
  --chart-4: #8a5a17;
  --chart-5: #2f6b3e;
  --chart-6: #3d5a73;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.015em;
  --eyebrow-tracking: 0.08em;

  /* Swiss ledger shape: square corners, hairline borders, no shadow. */
  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-btn: none;
  --shadow-xs: none;
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.06em;
  --btn-weight: 500;
  --measure: 68ch;

  /* This app's own tokens — the ledger's rule colour and the paid stamp. */
  --x-rule: var(--border);
  --x-paper-shadow: color-mix(in srgb, var(--ink) 6%, transparent);
}

html[data-theme="dark"] {
  --canvas: #16150f;
  --surface: #1f1d17;
  --surface-2: #28251d;
  --border: #3a362a;
  --border-strong: #59533f;
  --ink: #f1eee2;
  --muted: #a79f8b;
  --accent: #f1eee2;
  --accent-hover: #ffffff;
  --accent-ink: #16150f;
  --accent-text: #e2775a;
  --accent-strong: #f1eee2;
  --accent-soft: #3a2018;
  --accent-border: #5c3527;
  --success: #6fae7c;
  --success-ink: #0f1a10;
  --success-soft: #1c2c1c;
  --success-strong: #8fc99b;
  --warning: #d9a256;
  --warning-ink: #1a1206;
  --warning-soft: #2e2413;
  --warning-strong: #e6b876;
  --danger: #e2775a;
  --danger-ink: #1a0d07;
  --danger-soft: #3a2018;
  --danger-strong: #ee9779;
  --chart-1: #f1eee2;
  --chart-2: #e2775a;
  --chart-3: #a79f8b;
  --chart-4: #d9a256;
  --chart-5: #6fae7c;
  --chart-6: #7fa3c9;

  --x-rule: var(--border);
  --x-paper-shadow: color-mix(in srgb, black 40%, transparent);
}

/*
 * app.css — BillEasy's own screens: the transparent-to-solid nav, the paper
 * ledger hero ground, the invoice mock-up and its PAID stamp (the page's one
 * entrance motion), the pricing tag and the inverted closing band.
 */

/* ---- Nav: transparent over the hero, solid once scrolled ------------------ */
.site-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.site-nav.is-scrolled {
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  border-bottom-color: var(--border);
  backdrop-filter: blur(6px);
}

/* ---- Hero: paper ledger ground -------------------------------------------- */
.hero-ledger {
  background-image:
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 0, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px, transparent 3rem),
    repeating-linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 0, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px, transparent 3rem);
  background-position: center top;
}

/* ---- Invoice card ----------------------------------------------------------- */
.invoice-card {
  position: relative;
}
.invoice-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent-text);
}

.paid-stamp {
  position: absolute;
  top: -1.1rem;
  right: 1.25rem;
  border: 2px solid var(--accent-text);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.3rem 0.75rem;
  transform: rotate(-9deg);
  opacity: 1;
}
.paid-stamp.is-inview {
  animation: stamp-in 650ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-9deg) scale(2.6); }
  55% { opacity: 1; transform: rotate(-9deg) scale(0.9); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}
html.reduced-motion .paid-stamp.is-inview {
  animation: none;
}

/* ---- Ledger rows (how it works) --------------------------------------------- */
.ledger-row:first-child {
  border-top: none;
}

/* ---- Pricing tag on the Pro row --------------------------------------------- */
.plan-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-text);
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ---- Closing band: inverted ground, cream-filled button -------------------- */
.cta-band {
  background: var(--ink);
  color: var(--canvas);
}
.cta-band p {
  color: color-mix(in srgb, var(--canvas) 78%, transparent);
}
.btn-band {
  background: var(--canvas);
  border-color: var(--canvas);
  color: var(--ink);
}
.btn-band:hover {
  background: color-mix(in srgb, var(--canvas) 88%, var(--ink) 12%);
  border-color: color-mix(in srgb, var(--canvas) 88%, var(--ink) 12%);
}