@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --smoke-black: #1F1410;
  --ember-orange: #E54B1C;
  --brick-red: #8B2818;
  --butcher-paper: #F5EEDF;
  --butcher-paper-dim: #ECE2CC;
  --smoke-gray: #6B5D54;
  --mustard-gold: #C8901F;
}

html, body {
  background-color: var(--butcher-paper);
  color: var(--smoke-black);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-family: 'Alfa Slab One', serif; letter-spacing: 0.005em; }
.font-eyebrow { font-family: 'Oswald', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.font-label   { font-family: 'Oswald', sans-serif; letter-spacing: 0.06em; font-weight: 600; }

.bg-smoke    { background-color: var(--smoke-black); }
.bg-ember    { background-color: var(--ember-orange); }
.bg-brick    { background-color: var(--brick-red); }
.bg-paper    { background-color: var(--butcher-paper); }
.bg-paper-dim{ background-color: var(--butcher-paper-dim); }
.bg-mustard  { background-color: var(--mustard-gold); }

.text-smoke  { color: var(--smoke-black); }
.text-ember  { color: var(--ember-orange); }
.text-brick  { color: var(--brick-red); }
.text-paper  { color: var(--butcher-paper); }
.text-graygy { color: var(--smoke-gray); }
.text-mustard{ color: var(--mustard-gold); }

.border-smoke   { border-color: var(--smoke-black); }
.border-ember   { border-color: var(--ember-orange); }
.border-paperdim{ border-color: var(--butcher-paper-dim); }
.border-graygy  { border-color: var(--smoke-gray); }

/* CTA button — primary */
.btn-ember {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--ember-orange);
  color: var(--butcher-paper);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95rem 1.75rem;
  border-radius: 4px;
  transition: background-color 120ms ease;
}
.btn-ember:hover { background-color: var(--brick-red); }

.btn-smoke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--smoke-black);
  color: var(--butcher-paper);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95rem 1.75rem;
  border-radius: 4px;
  transition: background-color 120ms ease;
}
.btn-smoke:hover { background-color: var(--brick-red); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--smoke-black);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border-radius: 4px;
  border: 2px solid var(--smoke-black);
  transition: all 120ms ease;
}
.btn-ghost:hover { background-color: var(--smoke-black); color: var(--butcher-paper); }

/* Pill badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}
.pill-mustard { background-color: var(--mustard-gold); color: var(--smoke-black); }
.pill-ember   { background-color: var(--ember-orange); color: var(--butcher-paper); }
.pill-smoke   { background-color: var(--smoke-black); color: var(--butcher-paper); }
.pill-paper   { background-color: var(--butcher-paper); color: var(--smoke-black); border: 1px solid var(--smoke-black); }
.pill-outline { background-color: transparent; color: var(--smoke-black); border: 1px solid var(--smoke-black); }

/* Branded cut-tile system — replaces stock photography with on-brand illustration */
.cut-tile {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--brick-red) 0%, var(--smoke-black) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8% 8%;
  position: relative;
  overflow: hidden;
  color: var(--butcher-paper);
  text-align: center;
}
.cut-tile::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 82%, rgba(229,75,28,0.30) 0%, transparent 48%),
    radial-gradient(circle at 82% 18%, rgba(200,144,31,0.22) 0%, transparent 50%);
}
.cut-tile::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.07;
  background-image:
    radial-gradient(circle at 25% 30%, var(--butcher-paper) 0.6px, transparent 1.2px),
    radial-gradient(circle at 75% 70%, var(--butcher-paper) 0.6px, transparent 1.2px);
  background-size: 22px 22px, 28px 28px;
}
.cut-tile-smoke   { background: linear-gradient(135deg, #2a1a14 0%, var(--smoke-black) 100%); }
.cut-tile-ember   { background: linear-gradient(135deg, var(--ember-orange) 0%, var(--brick-red) 100%); }
.cut-tile-mustard { background: linear-gradient(135deg, var(--mustard-gold) 0%, #8a6314 100%); color: var(--smoke-black); }
.cut-tile-mustard .cut-tile-cat { color: var(--smoke-black); opacity: 0.75; }
.cut-tile-ember .cut-tile-cat { color: var(--mustard-gold); }

.cut-tile-flame {
  width: 18%; max-width: 64px; height: auto;
  margin-bottom: 0.85rem;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35));
  position: relative; z-index: 1;
}
.cut-tile-cat {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--mustard-gold);
  position: relative; z-index: 1;
}
.cut-tile-name {
  font-family: 'Alfa Slab One', serif;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  line-height: 0.95;
  margin-top: 0.55rem;
  position: relative; z-index: 1;
}
.cut-tile-spec {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin-top: 0.7rem;
  opacity: 0.82;
  position: relative; z-index: 1;
}

/* Smaller variants */
.cut-tile.sm { padding: 6%; }
.cut-tile.sm .cut-tile-flame { width: 20%; max-width: 38px; margin-bottom: 0.4rem; }
.cut-tile.sm .cut-tile-cat   { font-size: 0.6rem; letter-spacing: 0.16em; }
.cut-tile.sm .cut-tile-name  { font-size: clamp(0.95rem, 2vw, 1.25rem); }
.cut-tile.sm .cut-tile-spec  { display: none; }

.cut-tile.xs { padding: 8%; }
.cut-tile.xs .cut-tile-flame { width: 30%; max-width: 28px; margin-bottom: 0.25rem; }
.cut-tile.xs .cut-tile-cat   { display: none; }
.cut-tile.xs .cut-tile-name  { font-size: clamp(0.8rem, 1.6vw, 1rem); }
.cut-tile.xs .cut-tile-spec  { display: none; }

/* Tiny thumb for staff dashboard rows */
.cut-thumb {
  width: 56px; height: 56px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--brick-red) 0%, var(--smoke-black) 100%);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--butcher-paper);
  position: relative;
  overflow: hidden;
}
.cut-thumb::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 80%, rgba(229,75,28,0.4) 0%, transparent 60%);
}
.cut-thumb svg { width: 50%; height: 50%; opacity: 0.95; position: relative; z-index: 1; }

.cut-thumb-mustard { background: linear-gradient(135deg, var(--mustard-gold) 0%, #8a6314 100%); }
.cut-thumb-ember   { background: linear-gradient(135deg, var(--ember-orange) 0%, var(--brick-red) 100%); }

/* Flame SVG colors driven by tile variant */
.cut-tile .flame-outer,
.cut-thumb .flame-outer { fill: var(--butcher-paper); opacity: 0.96; }
.cut-tile .flame-inner,
.cut-thumb .flame-inner { fill: var(--mustard-gold); }
.cut-tile-mustard .flame-outer { fill: var(--smoke-black); opacity: 0.92; }
.cut-tile-mustard .flame-inner { fill: var(--ember-orange); }
.cut-tile-ember .flame-inner { fill: var(--mustard-gold); }

/* Subtle paper grain overlay for hero sections (cheap CSS, prints nicely) */
.paper-grain {
  position: relative;
}
.paper-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 25% 30%, var(--smoke-black) 0.5px, transparent 1px),
    radial-gradient(circle at 75% 70%, var(--smoke-black) 0.5px, transparent 1px);
  background-size: 18px 18px, 24px 24px;
  mix-blend-mode: multiply;
}

/* Smoke divider — horizontal rule with brand flavor */
.smoke-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--smoke-gray), transparent);
  border: 0;
}

/* Data-table styles for dashboards */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.data-table th {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--smoke-gray);
  text-align: left;
  padding: 0.85rem 1rem;
  background-color: var(--butcher-paper-dim);
  border-bottom: 1px solid #ddd2bb;
}
.data-table td {
  padding: 1rem;
  border-bottom: 1px solid #ece2cc;
  font-size: 0.92rem;
  color: var(--smoke-black);
  vertical-align: middle;
}
.data-table tr:hover td { background-color: rgba(229,75,28,0.04); }

/* Sidebar nav */
.side-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.95rem;
  border-radius: 6px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--butcher-paper);
  opacity: 0.78;
  transition: all 120ms ease;
}
.side-link:hover { opacity: 1; background-color: rgba(245,238,223,0.06); }
.side-link.active { opacity: 1; background-color: var(--ember-orange); color: var(--butcher-paper); }

/* Print fidelity — make sure backgrounds render when user prints from browser */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}