/* Every website page (landing, dashboard, privacy, terms) in the extension's look. tokens.css (a copy of
   extension/ui/tokens.css) sets the colours and fonts; this file maps the website's own variables onto them and
   restyles the pieces the pages take from styles.css. Load order: styles.css, (app.css), tokens.css, dashboard.css. */
:root {
  --round: var(--sans);
  --btn-bg: var(--ink);
  --btn-ink: var(--paper);
  --lilac-ink: var(--ink);
  --coin-ink: var(--seed);
  --gain: var(--ink);
  --shadow: 0 18px 40px -28px rgba(74, 71, 65, .35);
  --lift: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -14px rgba(74, 71, 65, .5);
}
html { background: var(--paper); }
body { background: var(--paper-grad, var(--paper)); min-height: 100vh; }
a { color: var(--ink); }
:focus-visible { outline-color: var(--ink); }

/* Type: Instrument Serif for headlines and big numbers, the system sans (San Francisco on Apple devices) for text */
.brand { font: 400 36px/1 var(--display); letter-spacing: -.02em; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.025em; line-height: 1.05; }
h3 { font-weight: 600; }
h1 em, h2 em, h3 em {
  font-style: italic; color: var(--ink); padding: 0 .06em;
  background: linear-gradient(transparent 66%, color-mix(in srgb, var(--accent) 75%, transparent) 66% 90%, transparent 90%);
}
@media (prefers-color-scheme: dark) { h1 em, h2 em, h3 em { color: var(--accent); background: none; padding: 0; } }
.nav a { font-weight: 500; }
.nav a:hover, .site-footer a:hover { color: var(--ink); }
.eyebrow { font-weight: 500; font-size: 13px; letter-spacing: .12em; color: var(--muted); background: none; padding: 0; border-radius: 0; }
.site-footer { border-top-width: 1px; }

/* Buttons: rounded rectangles with the soft yellow (or charcoal) gradient */
.btn { border-radius: 12px; font-weight: 500; background: var(--accent-grad, var(--accent)); color: var(--on-accent); box-shadow: var(--lift); }
.btn:hover { transform: none; filter: brightness(.97); box-shadow: var(--lift); }
.btn-dark { background: var(--ink-grad, var(--ink)); color: var(--paper); }
.btn-dark:hover { box-shadow: var(--lift); }

/* Panels: flat sand cards, no borders */
.card { background: var(--surface-grad, var(--card)); border-color: transparent; }

/* "You've kept": the sunflower, big serif numbers */
.jar-art, .empty-jar { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent-soft) 70%, var(--paper)) 0%, var(--paper) 75%); }
.jar-art .jar-svg, .empty-jar .jar-svg { width: 96px; height: auto; overflow: visible; }
.jar-svg .sf-plant, .jar-svg .sf-petals { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) .4s; }
.kept-amount { font: 400 clamp(56px, 8vw, 84px)/1 var(--display); letter-spacing: -.02em; }
.jar-worth b { font: 400 36px/1.1 var(--display); letter-spacing: -.01em; }
.hero-stats div { background: var(--paper); border-radius: 10px; }
.hero-stats dd { font: 400 28px/1.1 var(--display); color: var(--ink); }
.hero-stats div:first-child dd { color: var(--ink); }
.chip { border-radius: 6px; font-weight: 500; }
.chip-streak { background: var(--accent-grad, var(--accent)); color: var(--on-accent); }
.chip-streak.chip-pending { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.chip-flame { background: var(--paper); box-shadow: inset 0 -4px 0 var(--coin-dark); }

/* Recent pauses */
.filter { border-radius: 10px; border-width: 1px; font-weight: 500; }
.filter:hover { border-color: var(--muted); }
.filter[aria-pressed="true"] { background: var(--ink-grad, var(--ink)); color: var(--paper); border-color: var(--ink); }
.filter-count { border-radius: 6px; }
.ev-price { font: 400 22px/1.1 var(--display); letter-spacing: -.01em; }
.ev-price-kept { color: var(--ink); }
.ev-decision { border-radius: 4px; font-weight: 500; }
.d-dropped { background: var(--ink); color: var(--paper); }
.d-kept { background: var(--accent-soft); color: var(--ink); }
.d-dismissed { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.btn { font-size: 17px; }

/* ---------- landing (index.html) ---------- */
.hero .lede em { font-weight: 500; }
.stage { background: var(--stage); border-radius: 20px; }
.popup { background: var(--paper); border: 0; border-radius: 20px; padding: 22px 22px 18px;
  box-shadow: 0 34px 60px -30px rgba(74, 71, 65, .45), 0 2px 6px rgba(74, 71, 65, .06); }
.popup-top { font: 400 22px/1 var(--display); letter-spacing: -.01em; color: var(--ink); }
.product-tile { width: 72px; height: 88px; border-radius: 8px; background: var(--surface-grad, var(--card)); color: var(--muted); }
.product-name { font: 400 13px/1.35 var(--sans); color: var(--muted); }
.product-price { font: 400 44px/1 var(--display); letter-spacing: -.02em; }
.popup h2 { font-size: 40px; line-height: 1.02; margin-top: 4px; }
.popup > p { margin: 10px 0 16px; font-size: 15px; }
.reward { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border: 0; border-radius: 12px;
  background: var(--surface-grad, var(--card)); }
.reward-label { font: 500 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.reward-row { display: flex; align-items: center; gap: 12px; }
.reward-flower { flex: none; width: 44px; height: 55px; }
.reward-flower svg { display: block; width: 44px; height: 55px; overflow: visible; }
.hero-sunflower .sf-plant, .hero-sunflower .sf-petals { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) .6s; }
.reward .kept { font: 500 15px/1.3 var(--sans); }
.reward .kept strong { color: var(--ink); font-weight: 500; }
.reward .worth { margin: 4px 0 0; font: 400 15px/1.3 var(--sans); color: var(--muted); }
.reward .worth b { font: 400 22px/1.1 var(--display); color: var(--ink); letter-spacing: -.01em; }
.reward .fineprint { margin: 6px 0 0; font: 400 13px/1.35 var(--sans); color: var(--muted); }
.popup .actions .btn { box-shadow: var(--lift); }
.popup .actions .quiet { font: 400 15px var(--sans); }

.steps li { background: var(--surface-grad, var(--card)); border: 0; border-radius: 12px; }
.steps li:hover { transform: none; }
.steps li::before, .steps li:nth-child(n)::before { background: var(--accent-grad, var(--accent)); color: var(--on-accent);
  font: 400 20px/1 var(--display); border-radius: 8px; }
.steps h3 { font: 400 26px/1.1 var(--display); letter-spacing: -.01em; }
.private .wrap { background: var(--surface-grad, var(--card)); border-radius: 20px; }
.facts li { background: var(--paper); border-radius: 12px; }
.facts svg { background: var(--accent-soft); color: var(--ink); border-radius: 6px; }
.facts strong { font: 600 16.5px/1.35 var(--sans); }

/* ---------- privacy and terms ---------- */
.policy .summary { background: var(--surface-grad, var(--card)); border-radius: 12px; }
.policy h3 { font-weight: 600; }
.policy li::marker { color: var(--muted); }
.policy code { background: var(--card); color: var(--ink); border-radius: 4px; }
.policy th { font: 600 15px var(--sans); }
.policy th, .policy td { border-bottom-width: 1px; }
@media (max-width: 480px) { .popup h2 { font-size: 34px; } .product-price { font-size: 38px; } .policy tr { border-bottom-width: 1px; } }