/* tokens.css — colors, type, spacing. PLAN.md section 7.3 and 7.4.
   All four faces are Open Font License and vendored under assets/fonts/, so the
   app works offline and makes no third-party request. */

/* Fraunces — display serif, large sizes only (7.4) */
@font-face {
  font-family: Fraunces;
  src: url('../assets/fonts/fraunces.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Caveat — Wild section labels and sticky notes. Never body text (7.2) */
@font-face {
  font-family: Caveat;
  src: url('../assets/fonts/caveat.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Atkinson Hyperlegible — everything a child reads (7.4) */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../assets/fonts/atkinson-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../assets/fonts/atkinson-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../assets/fonts/atkinson-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
/* Oswald — Prime section labels, fight-poster feel (7.8) */
@font-face {
  font-family: Oswald;
  src: url('../assets/fonts/oswald.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  --cream:      #F6F1E7;   /* page ground */
  --panel:      #FFFDF8;   /* cards, rails */
  --ink:        #1F1B16;   /* text */
  --muted:      #6B645A;   /* secondary text */
  --line:       #E6DED0;   /* hairlines, frames */
  --sticky:     #FFF3B0;   /* tip notes */
  --night:      #12100E;   /* arena backdrop */
  --spot:       #F3E3C0;   /* spotlight warm */
  --check:      #2E7D4F;   /* a check landing */

  --font-display: Fraunces, "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-hand:    Caveat, "Bradley Hand", cursive;
  --font-body:    "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-prime:   Oswald, "Arial Narrow", sans-serif;

  /* 7.4 type scale */
  --t-display: clamp(40px, 6vw, 64px);
  --t-name:    clamp(28px, 3.4vw, 32px);
  --t-body:    19px;          /* 18-20px in Wild */
  --t-small:   13px;          /* sources */

  --tap: 56px;             /* 7.2: minimum tap target, every screen size */
  --radius: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --content-max: 1600px;
}

/* Two accents, because the screen always holds two fighters and they have to be
   told apart at a glance: --accent is fighter 1, --accent-2 is fighter 2. */
[data-arena="wild"]  { --accent: #7C6CCF; --accent-soft: #EDE9FA; --selected: #FBE9E7;
                       --accent-2: #D9682F; --accent-2-soft: #FBE7DB; }
[data-arena="prime"] { --accent: #9B2C2C; --accent-soft: #F6E4E1; --selected: #F1E3D3; --brass: #C9A24D;
                       --accent-2: #C9A24D; --accent-2-soft: #F6EDD9; }

/* 7.4: Prime body runs 16-18px against Wild's 18-20px */
[data-arena="prime"] { --t-body: 17px; }