/* Art of Kickboxing design tokens: Red line.
   Sumi black and dojo paper, with the red of the AOK slash as the one strong colour. Oswald set tall for headings (their own
   brand face), Roboto for text, and a few Japanese characters in a serif for the Shokunin, Ikigai, Kaizen principles.
   Contrast figures are WCAG ratios against --ink. */
@font-face { font-family: "Oswald"; src: url("../fonts/Oswald.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif JP"; src: url("../fonts/NotoSerifJP-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ink: #121212;            /* sumi */
  --ink-2: #1b1b1b;
  --ink-3: #262626;
  --line: rgba(246, 243, 238, .12);
  --line-2: rgba(246, 243, 238, .22);
  --chalk: #f6f3ee;          /* paper text on ink: 17.6:1 */
  --chalk-2: #cfcac2;        /* 12.1:1 */
  --chalk-3: #a29d96;        /* 7.1:1 */
  --signal: #cf002b;         /* AOK red: white text on it 5.9:1 */
  --signal-deep: #9e0021;    /* pressed and hover: 8.9:1 */
  --signal-hi: #ff5a6e;      /* red as text on ink: 6.4:1 */
  --signal-wash: rgba(207, 0, 43, .16);
  --clay: #ff8a3d;
  --clay-wash: rgba(255, 138, 61, .14);
  --go: #5fd39a;
  --go-wash: rgba(95, 211, 154, .13);
  --steady: #ffbf00;         /* their review-star gold */
  --steady-wash: rgba(255, 191, 0, .13);

  /* Light sections on the public site */
  --bone: #f6f3ee;           /* dojo paper */
  --bone-2: #ebe6de;
  --bone-line: rgba(18, 18, 18, .14);
  --on-bone-2: #575049;      /* 7.3:1 on paper */
  --signal-on-bone: #b50026; /* red as text on paper: 6.6:1 */

  --red: #cf002b;
  --red-deep: #720015;
  --gold: #ffbf00;

  --f-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --f-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: clamp(.8rem, .78rem + .1vw, .86rem);
  --step-0: clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.6vw, 5rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --r: 0px;
  --r-2: 2px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-gun: cubic-bezier(.76, 0, .24, 1);
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--chalk); font: 400 var(--step-0)/1.55 var(--f-body); font-kerning: normal; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; border-radius: 1px; }
input, textarea { caret-color: var(--signal-hi); }
html { scrollbar-color: #3a3a3a var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 10px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--signal); }
.num, td.num, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: .78em; letter-spacing: .06em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 999; background: var(--signal); color: #fff; padding: var(--s-2) var(--s-4); }
.skip:focus { top: var(--s-4); }

/* ------------------------------------------------------------------ readability
   Prefixed with html so these win over component styles in site.css, app.css and area files regardless of load order.
   Small text is never below about 14px, labels are never the faint tone, and body copy sits a touch heavier. */
html body { font-weight: 400; line-height: 1.6; }
html .mono { font-size: .78rem; letter-spacing: .08em; }
html .faint, html .opt { color: var(--chalk-2); }
html .muted { color: var(--chalk-2); }
html .hint, html .fhint, html .fine { font-size: .95rem; color: var(--chalk-2); line-height: 1.5; }
html .ferr, html .err { font-size: .95rem; font-weight: 550; }

/* App screens */
html table.data th { font-size: .74rem; color: var(--chalk-2); }
html .stat dt { font-size: .9rem; color: var(--chalk-2); }
html .list .meta, html .small { font-size: .92rem; }
html .badge { font-size: .8rem; }
html .chart .axis { fill: var(--chalk-2); }