/* ============================================================
   Liquid Poem — Design Tokens
   Drop these into the top of app.css (or a new tokens.css imported first).
   Every screen brief references these names.
   ============================================================ */

:root {
  /* ── Core palette ──────────────────────────────────────── */
  --lp-paper:        #f0eee9;   /* canvas / app background */
  --lp-paper-warm:   #f5efe4;   /* phone frame inner, slightly warmer */
  --lp-card:         #e8e2d4;   /* card surface on paper */
  --lp-card-strong:  #ddd5c2;   /* hover / pressed card */

  --lp-ink:          #1c1410;   /* primary text, dark blocks */
  --lp-ink-soft:     #5a4a3e;   /* secondary text */
  --lp-ink-faint:    #9a8a7a;   /* tertiary, eyebrows, captions */

  --lp-rule:         #d8cfb8;   /* hairline dividers */
  --lp-rule-strong:  #c4b89c;   /* button borders, input borders */

  /* Wine accent — primary brand color */
  --lp-wine:         #7a1224;   /* burgundy / primary CTA */
  --lp-wine-deep:    #5a0d1b;   /* pressed / dark variant */

  /* Amber — vintage, scores, highlights */
  --lp-amber:        #b8862c;
  --lp-amber-soft:   #d4a84a;

  /* Status colors (drink window) */
  --lp-status-hold:    #6b8e6b;  /* sage — too young */
  --lp-status-window:  #b8862c;  /* amber — drink now */
  --lp-status-peak:    #7a1224;  /* wine — peaking, drink soon */
  --lp-status-past:    #8a6a5a;  /* dusty rose — past peak */

  /* Hero pick — the only dark card in the app (Sommelier home).
     Warm coffee, not pure ink — keeps it feeling like a lit object
     rather than a flat slab. */
  --lp-hero-pick-bg: #2a1f17;

  /* ── Type ramp ─────────────────────────────────────────── */
  --lp-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --lp-sans:   'Inter', -apple-system, system-ui, sans-serif;
  --lp-mono:   'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Sizes — keep ramp small and intentional */
  --lp-text-xs:   10px;   /* eyebrows, micro-meta */
  --lp-text-sm:   12px;   /* captions, italic asides */
  --lp-text-md:   14px;   /* body in dense lists */
  --lp-text-lg:   16px;   /* body / story prose */
  --lp-text-xl:   20px;   /* card titles, modal titles */
  --lp-text-2xl:  24px;   /* section heroes */
  --lp-text-3xl:  28px;   /* wine name on detail */
  --lp-text-4xl:  34px;   /* page heroes (Sommelier verdict) */

  /* Tracking */
  --lp-track-eyebrow: 1.8px;  /* uppercase eyebrows */
  --lp-track-tight:   -0.5px; /* large display headings */

  /* ── Spacing scale (4-based) ──────────────────────────── */
  --lp-s-1:  4px;
  --lp-s-2:  8px;
  --lp-s-3:  12px;
  --lp-s-4:  16px;
  --lp-s-5:  20px;
  --lp-s-6:  24px;
  --lp-s-8:  32px;
  --lp-s-10: 40px;

  /* Page gutters */
  --lp-gutter:        22px;   /* default L/R page margin */
  --lp-gutter-tight:  16px;   /* used for header bars */

  /* ── Radii ─────────────────────────────────────────────── */
  --lp-r-sm:   8px;    /* photo cards, score pills inside */
  --lp-r-md:   12px;   /* secondary buttons, list rows */
  --lp-r-lg:   14px;   /* primary cards, sheet rows */
  --lp-r-xl:   18px;   /* verdict block, hero cards */
  --lp-r-2xl:  22px;   /* bottom sheets */
  --lp-r-pill: 999px;  /* chips, FAB, score pills */

  /* ── Elevation ────────────────────────────────────────── */
  --lp-shadow-card:    0 1px 2px rgba(28,20,16,0.04), 0 12px 28px rgba(28,20,16,0.10);
  --lp-shadow-fab:     0 8px 22px rgba(122,18,36,0.40), 0 2px 6px rgba(28,20,16,0.20);
  --lp-shadow-sheet:   0 -10px 40px rgba(0,0,0,0.30);
  --lp-shadow-popover: 0 18px 40px rgba(28,20,16,0.18);

  /* ── Motion ───────────────────────────────────────────── */
  --lp-ease:        cubic-bezier(0.32, 0.72, 0, 1);  /* Apple-ish, decisive */
  --lp-dur-fast:    150ms;
  --lp-dur-med:     220ms;
  --lp-dur-slow:    400ms;
}

/* ── Reusable utility classes the briefs reference ──────── */

.lp-eyebrow {
  font-family: var(--lp-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: var(--lp-track-eyebrow);
  text-transform: uppercase;
  color: var(--lp-ink-faint);
}

.lp-eyebrow--accent { color: var(--lp-wine); }

.lp-eyebrow::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: var(--lp-s-2);
}

.lp-card {
  background: var(--lp-card);
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-r-lg);
  padding: var(--lp-s-4) var(--lp-s-4);
}

.lp-rule {
  border: 0;
  border-top: 1px solid var(--lp-rule);
  margin: var(--lp-s-4) 0;
}

.lp-italic-meta {
  font-family: var(--lp-serif);
  font-style: italic;
  font-size: var(--lp-text-md);
  color: var(--lp-ink-soft);
}