/* CalGrillz design tokens — premium editorial direction.
   Warm near-blacks (vs cold charcoal), refined editorial serif display,
   restrained body sans. */

:root {
  /* Warm dark palette — slight brown undertone, not pure black */
  --charcoal-900: #13100d;
  --charcoal-850: #1a1612;
  --charcoal-800: #221d18;
  --charcoal-750: #2a241e;
  --charcoal-700: #322a23;
  --charcoal-600: #4a3f35;
  --charcoal-500: #6b5b4d;

  /* Ember accents — slightly warmer, more spice than neon */
  --ember-500: #c8102e;
  --ember-400: #d92842;
  --ember-300: #d8632c;
  --ember-200: #d4a02e;

  /* Cream tones — paper, warm whites */
  --cream: #f5ecdc;
  --cream-dim: #d4c4ad;
  --muted: #8c7f70;
  --muted-dim: #665b50;

  --success: #5fa377;
  --warning: #d4a02e;
  --danger: #d8632c;

  --gold-vip: #c89e3a;

  /* Flame gradient — slightly muted, premium spice instead of neon */
  --flame: linear-gradient(135deg, #8b1538 0%, #c8102e 35%, #d8632c 70%, #d4a02e 100%);
  --flame-soft: linear-gradient(135deg, rgba(200,16,46,0.15) 0%, rgba(216,99,44,0.10) 60%, rgba(212,160,46,0.08) 100%);

  /* Type — editorial serif display, restrained sans body */
  --font-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* MOBILE phone screen base — used by the design-canvas prototype */
.cg-screen {
  width: 100%;
  height: 100%;
  background: var(--charcoal-900);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* subtle grain */
.cg-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.87  0 0 0 0.06 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  z-index: 0;
}
.cg-screen > * { position: relative; z-index: 1; }

.cg-screen::-webkit-scrollbar { display: none; }
.cg-screen { scrollbar-width: none; }

/* status notch */
.cg-status {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--cream);
  position: relative;
  z-index: 2;
}
.cg-status .right { display: flex; gap: 6px; align-items: center; opacity: 0.9; }

/* typography helpers */
.cg-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.0;
  text-transform: none;
}
.cg-eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.cg-mono { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* buttons */
.cg-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--cream);
  background: var(--flame);
  border: none;
  border-radius: 999px;
  padding: 15px 24px;
  cursor: pointer;
  box-shadow: 0 8px 28px -10px rgba(200,16,46,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 0.12s ease;
  text-transform: none;
}
.cg-btn-primary:active { transform: scale(0.97); }

.cg-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--charcoal-600);
  border-radius: 999px;
  padding: 13px 22px;
  cursor: pointer;
}

.cg-btn-pill {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--charcoal-600);
  background: transparent;
  color: var(--cream-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.cg-btn-pill.active {
  background: var(--cream);
  color: var(--charcoal-900);
  border-color: var(--cream);
}

/* card */
.cg-card {
  background: var(--charcoal-800);
  border: 1px solid var(--charcoal-700);
  border-radius: 16px;
}

/* chip / tag */
.cg-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--charcoal-700);
  color: var(--cream-dim);
  white-space: nowrap;
}
.cg-chip.ember {
  background: rgba(200,16,46,0.15);
  color: #e8a594;
  border: 1px solid rgba(216,99,44,0.35);
}
.cg-chip.warn {
  background: rgba(212,160,46,0.12);
  color: var(--ember-200);
  border: 1px solid rgba(212,160,46,0.35);
}
.cg-chip.success {
  background: rgba(95,163,119,0.12);
  color: var(--success);
  border: 1px solid rgba(95,163,119,0.35);
}

/* progress bar */
.cg-progress {
  height: 8px;
  background: var(--charcoal-700);
  border-radius: 999px;
  overflow: hidden;
}
.cg-progress > div {
  height: 100%;
  background: var(--flame);
  border-radius: 999px;
}

/* ember dot particle — kept minimal */
@keyframes ember-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 0.65; }
  100% { transform: translateY(-80px) scale(0.4); opacity: 0; }
}
.cg-ember {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #d4a02e 0%, #d8632c 40%, transparent 70%);
  filter: blur(0.4px);
  pointer-events: none;
}

@keyframes pulse-ember {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,99,44,0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(216,99,44,0); }
}
.cg-pulse-ember { animation: pulse-ember 1.8s ease-in-out infinite; }

.cg-flame-text {
  background: var(--flame);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* sticky header */
.cg-sticky-bg {
  background: rgba(19,16,13,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--charcoal-700);
}

.cg-divider-flame {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--charcoal-600);
}
.cg-divider-flame::before,
.cg-divider-flame::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--charcoal-600), transparent);
}

.cg-img {
  background: var(--charcoal-700);
  background-size: cover;
  background-position: center;
}

.cg-tier-bronze { color: #c97a3a; }
.cg-tier-silver { color: #cbd5e1; }
.cg-tier-gold   { color: var(--gold-vip); }
.cg-tier-vip    { color: transparent; background: var(--flame); -webkit-background-clip: text; background-clip: text; }

/* horizontal scroller */
.cg-hscroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
}
.cg-hscroll > * { scroll-snap-align: start; flex-shrink: 0; }
.cg-hscroll::-webkit-scrollbar { display: none; }