/*
 * Candleburrow brand tokens and components.
 *
 * This is site chrome, not game art: the closed game palettes in
 * packages/content do not apply here. Every colour the site uses is a token
 * below, so a future game's page can import this file and look like family.
 * See apps/site/BRAND.md for how the tokens are meant to be used.
 */

:root {
  /* Sky and ground */
  --night: #1a1530;        /* page background: dusk gone to night */
  --night-deep: #110d20;   /* footer, hero letterbox, card art backing */
  --dusk: #4a3b6b;         /* borders, rules, muted chrome */
  --plum: #6b3d6e;         /* sky accent, hover borders */
  --moss: #5f7a3f;         /* hill green: links, tags, inner lines */
  --pine: #2f4a33;         /* deep green: tag backing, dark accents */

  /* Light */
  --candle: #f0b45a;       /* warm amber: buttons, focus ring, flame */
  --ember: #d9772b;        /* deeper orange: button pressed, flame tip */
  --glow: rgba(240, 180, 90, 0.28);

  /* Wood and paper */
  --bark: #5b3d2c;         /* card frames, dividers */
  --loam: #8a6a4b;         /* lighter frame highlight */
  --parchment: #efe3c8;    /* body text */
  --parchment-dim: #c8bba2;/* secondary text */
  --ink: #16110c;          /* text on amber */

  /* Type */
  --font-display: "Pixelify Sans", "Press Start 2P", ui-monospace, monospace;
  --font-body: "Lora", Georgia, "Times New Roman", serif;
  --text: 1.125rem;        /* 18px */
  --leading: 1.65;
  --measure: 60ch;

  /* Rhythm: a 4px grid, like the pixel art */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;
  --s16: 4rem;

  /* Pixel-stepped corner: cuts one 4px pixel from each corner */
  --step: 4px;
  --stepped: polygon(
    var(--step) 0, calc(100% - var(--step)) 0, 100% var(--step),
    100% calc(100% - var(--step)), calc(100% - var(--step)) 100%,
    var(--step) 100%, 0 calc(100% - var(--step)), 0 var(--step)
  );
}

/* ---- Base ---- */

html {
  background: var(--night);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: var(--text);
  line-height: var(--leading);
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--parchment);
  margin: 0 0 var(--s3);
}

h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }

a { color: var(--candle); text-decoration-color: var(--plum); text-underline-offset: 0.18em; }
a:hover { color: var(--parchment); text-decoration-color: var(--candle); }

:focus-visible {
  outline: 2px solid var(--candle);
  outline-offset: 3px;
}

img, svg, canvas { display: block; }

/* Pixel art is never smoothed. */
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---- Components ---- */

/* Wordmark lockup: mark + name. The mark is a 24px grid SVG scaled by integers. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  color: var(--parchment);
  text-decoration: none;
}
.brand .mark { width: 48px; height: 48px; }
.brand .mark.small { width: 24px; height: 24px; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
.brand.small .wordmark { font-size: 1.125rem; }

/* Card: a bark frame with a thin inner moss line that warms on hover. */
.card {
  background: var(--night-deep);
  border: 2px solid var(--bark);
  box-shadow: inset 0 0 0 1px var(--pine);
  clip-path: var(--stepped);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-2px);
    border-color: var(--loam);
    box-shadow: inset 0 0 0 1px var(--candle);
  }
}
.card-body { padding: var(--s4) var(--s6) var(--s6); }
.card-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }

/* Button: amber on ink, pixel-stepped, no rounding. */
.button {
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 1.5rem;
  background: var(--candle);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  clip-path: var(--stepped);
  box-sizing: border-box;
  transition: background 160ms ease, transform 160ms ease;
}
.button:hover { background: var(--parchment); color: var(--ink); }
.button:active { background: var(--ember); transform: translateY(1px); }

/* Tag: small moss label for status like "Public beta". */
.tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  background: var(--pine);
  color: var(--parchment);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  clip-path: var(--stepped);
  --step: 2px;
}

/* Ornament: a quiet rule with a three-pixel ember in the middle. */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: 20rem;
  margin: var(--s8) auto;
  color: var(--dusk);
}
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: var(--dusk); }
.ornament i {
  width: 12px; height: 4px;
  background:
    linear-gradient(var(--candle), var(--candle)) 4px 0 / 4px 4px no-repeat,
    linear-gradient(var(--ember), var(--ember)) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--ember), var(--ember)) 8px 0 / 4px 4px no-repeat;
}

/* ---- Motion ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}