/* Kolfe Coffee — Design tokens derived from the pricelist artwork */

:root {
  /* Brand greens (from the pricelist forest green) */
  --k-green-900: #1f2d1f;   /* deepest — headlines on cream */
  --k-green-800: #2e402b;   /* primary forest (logo stroke) */
  --k-green-700: #3a5036;   /* pricelist BG base */
  --k-green-600: #4a6443;   /* card surface on green BG */
  --k-green-500: #5f7a56;   /* hovers */
  --k-green-300: #9db096;   /* muted accents */
  --k-green-100: #d8e1d1;   /* very light green wash */

  /* Warm neutrals */
  --k-cream: #f5efe1;       /* page BG, off-white */
  --k-cream-2: #ece4d1;     /* subtle surface */
  --k-paper: #fbf7ee;       /* lifted card on cream */
  --k-ink: #1a1c17;         /* body text on cream */
  --k-ink-2: #3d3a2f;
  --k-ink-3: #6b6553;
  --k-line: #d9d1bb;        /* hairlines on cream */
  --k-line-2: rgba(255,255,255,0.12); /* hairlines on green */

  /* Warm accents (earthy, shared chroma) */
  --k-berry: #9a3b2a;       /* coffee-berry red from the hearts */
  --k-berry-soft: #c87666;
  --k-wheat: #c8a86b;       /* amber/wheat */
  --k-crema: #e9d7a9;       /* pale crema */

  /* System */
  --k-radius-sm: 8px;
  --k-radius: 14px;
  --k-radius-lg: 22px;
  --k-radius-pill: 999px;

  --k-shadow-sm: 0 1px 2px rgba(26,28,23,.06), 0 1px 1px rgba(26,28,23,.04);
  --k-shadow: 0 6px 24px -8px rgba(26,28,23,.18), 0 2px 6px rgba(26,28,23,.06);
  --k-shadow-lg: 0 24px 60px -20px rgba(26,28,23,.28), 0 8px 20px rgba(26,28,23,.08);

  /* Type */
  --k-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --k-sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --k-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

html, body { background: var(--k-cream); color: var(--k-ink); font-family: var(--k-sans); }

/* Utilities reused across screens */
.kx-serif { font-family: var(--k-serif); font-weight: 500; letter-spacing: -0.01em; }
.kx-sans  { font-family: var(--k-sans); }
.kx-mono  { font-family: var(--k-mono); }

.kx-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--k-radius-pill);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--k-cream-2); color: var(--k-ink-2);
  border: 1px solid var(--k-line);
}
.kx-pill.on-green { background: rgba(255,255,255,.08); color: var(--k-cream); border-color: var(--k-line-2); }
.kx-pill.berry { background: rgba(154,59,42,.1); color: var(--k-berry); border-color: rgba(154,59,42,.25); }

.kx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--k-radius-pill);
  font-family: var(--k-sans); font-weight: 500; font-size: 14px;
  letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.kx-btn:active { transform: translateY(1px); }
.kx-btn--primary { background: var(--k-green-800); color: var(--k-cream); }
.kx-btn--primary:hover { background: var(--k-green-900); }
.kx-btn--ghost { background: transparent; color: var(--k-green-900); border-color: var(--k-green-800); }
.kx-btn--ghost:hover { background: var(--k-green-800); color: var(--k-cream); }
.kx-btn--cream { background: var(--k-cream); color: var(--k-green-900); }
.kx-btn--cream:hover { background: var(--k-crema); }

.kx-card { background: var(--k-paper); border: 1px solid var(--k-line); border-radius: var(--k-radius); }

/* Subtle striped placeholder (for imagery we don't have) */
.kx-placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(46,64,43,.06) 0 10px, transparent 10px 20px),
    var(--k-cream-2);
  border: 1px dashed rgba(46,64,43,.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--k-ink-3);
  font-family: var(--k-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.kx-placeholder.on-green {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    var(--k-green-600);
  border: 1px dashed rgba(255,255,255,.18);
  color: rgba(255,255,255,.6);
}

/* Scroll nice */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(46,64,43,.18); border-radius: 8px; }