/* ===== Bliss Hue Café · Design Tokens ===== */
:root {
  /* Tier 1 — Brand */
  --c-midnight: #0E0A08;
  --c-carmel:   #E89A3C;
  --c-cream:    #FAF3E7;
  --c-cocoa:    #6B4423;

  /* Tier 2 — Neutrals */
  --c-espresso: #2B1F15;
  --c-latte:    #F0E6D2;
  --c-stone:    #A89580;

  /* Tier 3 — Frappe drink accent colors */
  --c-f-darko:   #2C1810;
  --c-f-carmel:  #C68642;
  --c-f-valmond: #F5DEB3;
  --c-f-biscoff: #B8763E;
  --c-f-fudgie:  #4A2C1A;
  --c-f-cashew:  #8B5A3C;
  --c-f-tella:   #6D4226;

  /* Tier 4 — System status */
  --c-ready:     #10B981;
  --c-preparing: #F59E0B;
  --c-soldout:   #EF4444;
  --c-info:      #3B82F6;

  /* Typography */
  --f-ui:      'Inter', -apple-system, system-ui, sans-serif;
  --f-display: 'Impact', 'Inter', sans-serif;
  --f-serif:   Georgia, 'Times New Roman', serif;
  --f-mono:    'Menlo', 'SF Mono', monospace;

  /* Space scale (8px base) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;

  /* Border radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-pill: 999px;

  /* Motion */
  --t-fast: 120ms ease;
  --t-med:  220ms ease;

  /* Shadows */
  --sh-soft:       0 4px 14px rgba(0,0,0,0.08);
  --sh-card:       0 6px 18px rgba(0,0,0,0.10);
  --sh-glow-carmel: 0 4px 16px rgba(232,154,60,0.40);
}

/* ===== Reset / Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-ui);
  background: var(--c-cream);
  color: var(--c-midnight);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { font: inherit; }

/* ===== Type primitives ===== */
.eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-carmel);
  font-weight: 700;
}
.h1 {
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 0.98;
}
.h2 {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.05;
}
.h3 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.5px;
}
.subtitle {
  font-size: 15px;
  color: var(--c-stone);
  line-height: 1.6;
}
.price {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-carmel);
}

/* ===== Utility ===== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}