/* Hotones — design tokens */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;900&family=Archivo:wght@400;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* Brand */
  --ho-ember: #FF4D12;   /* primary action, active state, logo tag */
  --ho-chili: #E01E1E;   /* badges (HD/NEW), logo shadow only */
  --ho-flare: #FFB020;   /* hover, ratings */
  --ho-ash:   #F7EDE4;   /* main text on dark */
  --ho-coal:  #120B09;   /* page background */

  /* Neutrals */
  --ho-coal-2: #1C120F;  /* surfaces: inputs, cards, modals */
  --ho-coal-3: #241713;  /* thumbnail placeholder */
  --ho-line:   #3A2720;  /* borders */
  --ho-divider:#2A1C17;  /* section dividers */
  --ho-muted:  #A8968C;  /* metadata text */
  --ho-body-2: #C9B8AD;  /* secondary paragraph text */

  /* Type */
  --ho-font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; /* 900, uppercase */
  --ho-font-ui: 'Archivo', system-ui, sans-serif;
  --ho-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radius */
  --ho-radius-pill: 999px;
  --ho-radius-thumb: 4px;
  --ho-radius-badge: 2px;
  --ho-radius-modal: 8px;

  /* Tag shape (slanted sticker) */
  --ho-tag-transform: skewX(-10deg) rotate(-4deg);
  --ho-tag-shadow: 4px 4px 0 var(--ho-chili);

  /* Layout */
  --ho-container: 1440px;
  --ho-gutter: 24px;
}

body { margin: 0; background: var(--ho-coal); color: var(--ho-ash); font-family: var(--ho-font-ui); }
a { color: var(--ho-ember); text-decoration: none; }
a:hover { color: var(--ho-flare); }

.ho-tag {
  display: inline-block;
  background: var(--ho-ember); color: var(--ho-coal);
  font: 900 24px/1 var(--ho-font-display); text-transform: uppercase;
  padding: 6px 10px 4px;
  transform: var(--ho-tag-transform);
  box-shadow: var(--ho-tag-shadow);
}
.ho-btn { font: 700 14px/1 var(--ho-font-ui); padding: 14px 22px; border-radius: var(--ho-radius-pill); cursor: pointer; border: 1px solid transparent; }
.ho-btn--primary { background: var(--ho-ember); color: var(--ho-coal); }
.ho-btn--primary:hover { background: var(--ho-flare); }
.ho-btn--secondary { background: transparent; color: var(--ho-ash); border-color: var(--ho-line); }
.ho-btn--secondary:hover { border-color: var(--ho-ember); }
.ho-chip { font: 600 13px/1 var(--ho-font-ui); padding: 9px 15px; border-radius: var(--ho-radius-pill); border: 1px solid var(--ho-line); color: var(--ho-ash); }
.ho-chip[aria-pressed="true"] { background: var(--ho-ember); border-color: var(--ho-ember); color: var(--ho-coal); }
.ho-badge-hd { background: var(--ho-chili); color: var(--ho-ash); font: 700 11px/1 var(--ho-font-ui); padding: 4px 6px; border-radius: var(--ho-radius-badge); }
.ho-duration { background: var(--ho-coal); font: 400 11px/1 var(--ho-font-mono); padding: 4px 6px; border-radius: var(--ho-radius-badge); }
.ho-thumb { aspect-ratio: 16/9; border-radius: var(--ho-radius-thumb); position: relative; overflow: hidden; outline: 2px solid transparent; }
.ho-card:hover .ho-thumb { outline-color: var(--ho-ember); }