/* CacheBrief look: LEDGER (commerce, payments, business).
   Derived from Evergreen (briefcase-frontend-design/design-system-evergreen): emerald #3ecf8e,
   Figtree + Geist Mono, 24px dot grid. Adds a ledger-paper rule layer and a gold second accent for money.
   DESIGN, 2026-09-27. Status: provisional. */

@font-face {
  font-family: "CB Figtree";
  src: url("../../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "CB Geist Mono";
  src: url("../../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  --cb-look: "ledger";

  --cb-bg: #0e1411;
  --cb-bg-deep: #09100c;
  --cb-surface-soft: #111814;
  --cb-surface: #151d19;
  --cb-surface-raised: #1a241f;
  --cb-text: #eef5f0;
  --cb-muted: #a3b4aa;          /* Evergreen #8e9e95, raised for video */
  --cb-line: #243029;
  --cb-line-strong: #5f7067;
  --cb-accent: #3ecf8e;
  --cb-accent-text: #3ecf8e;    /* 9.3:1 on bg */
  --cb-accent-2: #e8bd7c;       /* gold: prices, money in, the figure that matters */
  --cb-on-accent: #05140c;
  --cb-danger: #f28b76;         /* money out, down moves */
  --cb-success: #3ecf8e;
  --cb-glow: rgba(62, 207, 142, 0.16);

  --cb-cap-band: rgba(7, 12, 9, 0.9);
  --cb-cap-edge: rgba(62, 207, 142, 0.2);
  --cb-cap-ink: #eef5f0;
  --cb-cap-hi: #4fe0a0;
  --cb-cap-dim: 0.46;
  --cb-chip-bg: rgba(17, 24, 20, 0.92);

  --cb-plate-light: #ffffff;
  --cb-plate-light-line: #dde6e0;
  --cb-plate-dark: #09100c;
  --cb-plate-dark-line: #2c3a32;
  --cb-plate-shadow: 0 30px 80px rgba(0, 8, 4, 0.55), 0 2px 0 rgba(255, 255, 255, 0.04);

  --cb-font-display: "CB Figtree", system-ui, sans-serif;
  --cb-font-body: "CB Figtree", system-ui, sans-serif;
  --cb-font-mono: "CB Geist Mono", ui-monospace, monospace;
  --cb-display-weight: 760;
  --cb-display-tracking: -0.032em;
  --cb-display-leading: 1.04;
  --cb-body-weight: 500;

  --cb-v-hero: 144px;
  --cb-v-headline: 96px;
  --cb-v-title: 64px;
  --cb-v-body: 48px;
  --cb-v-label: 40px;
  --cb-v-min: 36px;
  --cb-w-hero: 132px;
  --cb-w-headline: 84px;
  --cb-w-title: 56px;
  --cb-w-body: 42px;
  --cb-w-label: 32px;
  --cb-w-min: 30px;

  --cb-radius-sm: 10px;
  --cb-radius: 14px;
  --cb-radius-lg: 20px;
  --cb-grid: 24px;
}

/* ---------- background recipe ---------- */
/* far: emerald glow low-left, gold warmth high-right */
.cb-bg-far {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(44% 32% at 16% 74%, var(--cb-glow), transparent 70%),
    radial-gradient(36% 24% at 86% 14%, rgba(232, 189, 124, 0.08), transparent 70%);
}
/* mid: 24px dot grid (Evergreen), dots at 9% so they survive compression */
.cb-bg-grid {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1.6px, transparent 2px) 0 0 / var(--cb-grid) var(--cb-grid);
}
/* near: ledger paper. Horizontal rules every 96px and one margin rule; the rules scroll
   by tweening background-position-y (seek-safe), which reads as a page being entered. */
.cb-bg-floor {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 64px, rgba(62, 207, 142, 0.34) 64px 67px, transparent 67px),
    linear-gradient(rgba(62, 207, 142, 0.1) 2px, transparent 2px) 0 0 / 100% 96px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
}
.cb-frame--w .cb-bg-floor {
  background:
    linear-gradient(90deg, transparent 0 72px, rgba(62, 207, 142, 0.3) 72px 75px, transparent 75px),
    linear-gradient(rgba(62, 207, 142, 0.08) 2px, transparent 2px) 0 0 / 100% 72px;
}

.cb-eyebrow {
  font-family: var(--cb-font-mono);
  font-weight: 560;
  font-size: var(--cb-label);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cb-accent-text);
}
.cb-headline {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-display-weight);
  font-size: var(--cb-headline);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}
.cb-headline em {
  font-style: normal;
  color: var(--cb-accent-2);
}
/* every figure in this look is tabular so count-ups do not jitter */
.cb-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}