/* ─────────────────────────────────────────────────────────────
   Lemon Lime Design System — colors, type, spacing, radii.
   Import this once: <link rel="stylesheet" href="colors_and_type.css">
   ───────────────────────────────────────────────────────────── */

/* Webfonts: Fraunces (display serif), Inter Tight (UI sans), JetBrains Mono (numbers) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── PAPER + INK (the dominant 90%) ───────────────────────── */
  --ll-paper:        #FAF9F5;   /* cream paper — page background */
  --ll-paper-2:      #F2EFE6;   /* half-step darker — hover, sunken panels */
  --ll-paper-3:      #EAE6D9;   /* deeper — selected rows */
  --ll-ink:          #1F1F1E;   /* near-black, warm */
  --ll-ink-2:        #46443F;   /* secondary text */
  --ll-ink-3:        #807C72;   /* tertiary, captions */
  --ll-ink-4:        #B5B0A2;   /* placeholders, disabled */
  --ll-hairline:     #E8E4DA;   /* canonical 1px border */
  --ll-hairline-2:   #D8D2C2;   /* hover/focused border */

  /* ── BRAND GREEN (primary actions only) ────────────────────── */
  --ll-green:        #84cc16;   /* primary */
  --ll-green-deep:   #65a30d;   /* primary-pressed */
  --ll-green-tint:   #ECF7D4;   /* subtle bg */
  --ll-green-ink:    #3F6212;   /* text on green-tint */

  /* ── CORAL ACCENT (badges, links) ──────────────────────────── */
  --ll-coral:        #D97757;   /* Anthropic-warm coral */
  --ll-coral-deep:   #B5532E;
  --ll-coral-tint:   #F8E5DA;
  --ll-coral-ink:    #7A3215;

  /* ── CATEGORY EARTH TONES (POS pills) ──────────────────────── */
  --ll-cat-breakfast: #C97B26;  /* paratha amber */
  --ll-cat-lunch:     #6B7E2C;  /* polao olive */
  --ll-cat-snacks:    #B14C3D;  /* singara terracotta */
  --ll-cat-drinks:    #2B6F8B;  /* chai teal */
  --ll-cat-icecream:  #B8527E;  /* kulfi rose */
  --ll-cat-breakfast-tint: #F4E5D2;
  --ll-cat-lunch-tint:     #E6EBD2;
  --ll-cat-snacks-tint:    #F2D9D2;
  --ll-cat-drinks-tint:    #D6E5EC;
  --ll-cat-icecream-tint:  #F0DAE4;

  /* ── SEMANTIC ────────────────────────────────────────────── */
  --ll-success:      #4F7A21;
  --ll-warning:      #C97B26;
  --ll-danger:       #B5302A;
  --ll-info:         #2B6F8B;

  /* ── TYPE FAMILIES ───────────────────────────────────────── */
  --ll-serif:  'Fraunces', 'Newsreader', 'Playfair Display', Georgia, serif;
  --ll-sans:   'Inter Tight', 'Bricolage Grotesque', 'IBM Plex Sans', system-ui, sans-serif;
  --ll-mono:   'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ── TYPE SIZES (extreme contrast — use the gaps) ─────────── */
  --ll-fs-display: 80px;   /* hero, marketing */
  --ll-fs-h1:      48px;   /* page titles */
  --ll-fs-h2:      32px;   /* section starters */
  --ll-fs-h3:      22px;   /* card headers */
  --ll-fs-body:    15px;   /* body */
  --ll-fs-small:   13px;   /* captions */
  --ll-fs-micro:   11px;   /* tags, badges */

  /* Kitchen-Display-only: BIG GLANCEABLE */
  --ll-fs-kds-num: 96px;
  --ll-fs-kds-item: 28px;

  /* ── LINE HEIGHTS ────────────────────────────────────────── */
  --ll-lh-tight:   1.05;
  --ll-lh-snug:    1.2;
  --ll-lh-body:    1.5;
  --ll-lh-relaxed: 1.65;

  /* ── LETTER SPACING ──────────────────────────────────────── */
  --ll-tracking-display: -0.025em;
  --ll-tracking-h1:      -0.02em;
  --ll-tracking-h2:      -0.015em;
  --ll-tracking-body:     0;
  --ll-tracking-caps:     0.08em;

  /* ── SPACING (4px base) ──────────────────────────────────── */
  --ll-sp-1:  4px;
  --ll-sp-2:  8px;
  --ll-sp-3:  12px;
  --ll-sp-4:  16px;
  --ll-sp-5:  20px;
  --ll-sp-6:  24px;
  --ll-sp-8:  32px;
  --ll-sp-10: 40px;
  --ll-sp-12: 48px;
  --ll-sp-16: 64px;

  /* ── RADII ───────────────────────────────────────────────── */
  --ll-r-xs:  4px;
  --ll-r-sm:  8px;
  --ll-r-md:  12px;       /* canonical card radius */
  --ll-r-lg:  16px;
  --ll-r-pill: 9999px;

  /* ── BORDERS ─────────────────────────────────────────────── */
  --ll-border: 1px solid var(--ll-hairline);
  --ll-border-strong: 1px solid var(--ll-hairline-2);
  --ll-border-ink: 2px solid var(--ll-ink);

  /* ── SHADOWS (used only on floating UI; otherwise: borders) ─ */
  --ll-shadow-1: 0 1px 2px rgba(31,31,30,0.06);
  --ll-shadow-2: 0 4px 16px rgba(31,31,30,0.10);

  /* ── MOTION ──────────────────────────────────────────────── */
  --ll-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ll-dur-fast: 80ms;
  --ll-dur-base: 120ms;
  --ll-dur-slow: 240ms;
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC TYPE STYLES — use these as classes on tags.
   ───────────────────────────────────────────────────────────── */

.ll-display {
  font-family: var(--ll-serif);
  font-size: var(--ll-fs-display);
  line-height: var(--ll-lh-tight);
  letter-spacing: var(--ll-tracking-display);
  font-weight: 500;
  color: var(--ll-ink);
  font-variation-settings: "opsz" 144;
}

.ll-h1, h1.ll {
  font-family: var(--ll-serif);
  font-size: var(--ll-fs-h1);
  line-height: var(--ll-lh-tight);
  letter-spacing: var(--ll-tracking-h1);
  font-weight: 500;
  color: var(--ll-ink);
  font-variation-settings: "opsz" 96;
}

.ll-h2, h2.ll {
  font-family: var(--ll-serif);
  font-size: var(--ll-fs-h2);
  line-height: var(--ll-lh-snug);
  letter-spacing: var(--ll-tracking-h2);
  font-weight: 500;
  color: var(--ll-ink);
  font-variation-settings: "opsz" 48;
}

.ll-h3, h3.ll {
  font-family: var(--ll-serif);
  font-size: var(--ll-fs-h3);
  line-height: var(--ll-lh-snug);
  font-weight: 600;
  color: var(--ll-ink);
  font-variation-settings: "opsz" 24;
}

.ll-body, p.ll {
  font-family: var(--ll-sans);
  font-size: var(--ll-fs-body);
  line-height: var(--ll-lh-body);
  color: var(--ll-ink);
}

.ll-small {
  font-family: var(--ll-sans);
  font-size: var(--ll-fs-small);
  line-height: var(--ll-lh-body);
  color: var(--ll-ink-2);
}

.ll-caption {
  font-family: var(--ll-sans);
  font-size: var(--ll-fs-small);
  line-height: var(--ll-lh-body);
  color: var(--ll-ink-3);
}

.ll-eyebrow {
  font-family: var(--ll-sans);
  font-size: var(--ll-fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ll-tracking-caps);
  color: var(--ll-ink-3);
}

.ll-mono, code.ll {
  font-family: var(--ll-mono);
  font-size: 0.95em;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.ll-price {
  font-family: var(--ll-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--ll-ink);
  font-feature-settings: "tnum" 1;
}

.ll-price-small { font-size: 14px; font-weight: 500; }
.ll-price-large { font-size: 36px; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   BASE — apply page background + body type
   ───────────────────────────────────────────────────────────── */
.ll-page {
  background: var(--ll-paper);
  color: var(--ll-ink);
  font-family: var(--ll-sans);
  font-size: var(--ll-fs-body);
  line-height: var(--ll-lh-body);
  -webkit-font-smoothing: antialiased;
}