/* ═══════════════════════════════════════════════════════════════
   EFTERPLAN — Design token override (Redesign 2026)
   Inkluderas EFTER style.css. Ersätter bara :root-tokens — all
   komponentlogik i style.css fortsätter fungera oförändrat.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Paper & ink — varmt sand/beige */
  --paper:        oklch(95% 0.018 85);
  --paper-soft:   oklch(91% 0.024 80);
  --paper-card:   oklch(97% 0.012 85);
  --ink:          oklch(22% 0.02 80);
  --ink-soft:     oklch(40% 0.015 80);
  --ink-muted:    oklch(50% 0.012 80);
  --rule:         oklch(86% 0.022 80);
  --rule-strong:  oklch(78% 0.028 80);

  /* Primär accent: soft sage */
  --ink-teal:     oklch(58% 0.07 150);
  --ink-teal-dk:  oklch(50% 0.075 150);
  --ink-teal-tn:  oklch(91% 0.03 150);

  /* Sekundär: dämpad varm terrakotta */
  --ember:        oklch(60% 0.08 50);
  --ember-dk:     oklch(50% 0.085 50);
  --ember-tn:     oklch(92% 0.025 60);

  /* Legacy mappings (matchar style.css) */
  --bg:             var(--paper);
  --bg-card:        var(--paper-card);
  --text-primary:   var(--ink);
  --text-soft:      var(--ink-soft);
  --text-muted:     var(--ink-muted);
  --text-secondary: var(--ink-soft);
  --border:         var(--rule);
  --accent:         var(--ink-teal);
  --accent-dark:    var(--ink-teal-dk);
  --accent-light:   var(--ink-teal-tn);

  --disabled-bg:    oklch(85% 0.018 80);
  --red:            oklch(48% 0.13 28);
  --red-bg:         oklch(93% 0.025 28);
  --yellow:         oklch(50% 0.09 75);
  --yellow-bg:      oklch(93% 0.04 80);
  --grey:           var(--ink-muted);
  --grey-bg:        oklch(91% 0.018 80);
  --green:          oklch(50% 0.09 150);
  --danger:         oklch(50% 0.14 28);

  --shadow:    0 1px 2px rgba(60, 50, 30, .04), 0 8px 24px -12px rgba(60, 50, 30, .10);
  --shadow-sm: 0 1px 2px rgba(60, 50, 30, .05);
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(1200px 800px at 85% -10%, oklch(85% 0.04 70 / 0.35), transparent 60%),
    radial-gradient(900px  700px at -5% 110%, oklch(80% 0.05 150 / 0.18), transparent 55%);
}

::selection {
  background: var(--ink-teal);
  color: var(--paper);
}

.landing-hero::after,
.landing-section::before,
.landing-brand::before {
  background: var(--ink-teal);
  opacity: .6;
}

.privacy-badge {
  background: var(--paper-card);
  border-color: var(--rule);
  color: var(--ink-soft);
  font-weight: 500;
}

.landing-footer {
  background: oklch(28% 0.02 80);
}
.landing-footer a:hover {
  border-bottom-color: var(--ink-teal);
}

.faq-item p a:hover,
.landing-section p a:hover {
  text-decoration-color: var(--ink-teal);
}

/* ─── Hero: minska top-tomrum + lugnare headline ─── */
.landing-hero {
  min-height: auto;
  align-items: start;
}
@media (min-width: 768px) {
  .landing-hero {
    padding-top: var(--space-xl);
  }
}
.landing-content {
  max-width: 760px;
}
.landing-headline {
  font-size: calc(var(--fs-3xl) * 0.6);
  line-height: 1.32;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'wght' 400;
  letter-spacing: -0.008em;
  max-width: 38ch;
}
@media (min-width: 720px) {
  .landing-headline { max-width: 42ch; }
}

/* ─── Räkningar: intro-text under rubrik ─── */
.bills-intro {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 60ch;
}

/* ─── Konsolidera typografi-skala på landing ─── */
/* Slå ihop nästan-identiska små storlekar till två nivåer:
   – fs-sm för stödjande UI (eyebrow, nav, payoff)
   – fs-xs för fin print (note, footer, badges, disclaimer) */
.nav-text-link {
  font-size: var(--fs-sm);
}
.landing-section .legal-disclaimer,
.privacy-badge {
  font-size: var(--fs-xs);
}

/* ─── Bills: scanning + foto ─── */
.bills-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bills-scan-btn {
  font-size: 0.85rem;
  padding: 6px 12px;
}
.bill-scan-status {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--paper-soft);
  border-radius: var(--radius-sm, 8px);
}
.bill-scan-status--error {
  color: var(--red);
  background: var(--red-bg);
}
.bill-photo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm, 6px);
  object-fit: cover;
  background: var(--paper-soft);
  flex-shrink: 0;
  cursor: zoom-in;
  border: 1px solid var(--rule);
}
.bill-photo-preview {
  position: relative;
  margin-bottom: 8px;
}
.bill-photo-preview img {
  display: block;
  max-width: 100%;
  max-height: 180px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--rule);
  object-fit: contain;
  background: var(--paper-soft);
}
.bill-photo-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.bill-ocr {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  font-family: var(--font-mono);
}