/* Kanji Duel — design tokens.
   Black ink on warm paper, one red accent (shu, the hanko seal ink).
   Reuse this file as-is in the app. Paths are relative to design/. */

@import url("fonts/shippori.css");

@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("fonts/ZenKakuGothicNew-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("fonts/ZenKakuGothicNew-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Color. Contrast on --paper: ink 15:1, ink-soft 6.1:1, shu 5.0:1, ink-faint 3.5:1 (large text / rules only). */
  --paper:      #f2eadb;   /* warm washi */
  --paper-deep: #e7dcc6;   /* pressed areas, input well */
  --paper-edge: #d9ccb2;   /* genkō grid lines, hairlines */
  --ink:        #1b1712;   /* sumi, warm black */
  --ink-soft:   #5e5547;   /* secondary text */
  --ink-faint:  #857a69;   /* unmarked kanji, rules, disabled */
  --ink-ghost:  rgb(27 23 18 / 0.22); /* non-target kanji in a word */
  --shu:        #b8322a;   /* the one accent: stamp, marked-kanji dots, last 5 s */
  --shu-deep:   #8f231d;   /* pressed state of red things */

  /* Type. Mincho for kanji and the big moments, gothic for UI. */
  --font-kanji: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-ui:    "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;

  --step--1: 0.8125rem;  /* 13 — meta, labels */
  --step-0:  1rem;       /* 16 — body */
  --step-1:  1.25rem;    /* 20 — names, buttons */
  --step-2:  1.75rem;    /* 28 — kana answer */
  --step-3:  2.5rem;     /* 40 — headings, result word */
  --word:    clamp(6rem, 34vw, 9.5rem);   /* the duel word; stays under 2 cells wide on 390 px */
  --word-desktop: 11rem;

  --track-label: 0.08em;  /* small caps labels */
  --leading-tight: 1.1;
  --leading-body: 1.55;

  /* Space. 4 px base. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --column: 26rem;        /* phone column, also used centered on desktop */

  --radius: 2px;          /* ink blocks are cut, not rounded */
  --hair: 1px;
  --rule: 2px;

  /* Motion. One authored moment: the stamp. Everything else is quiet. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo out */
  --ease-stamp: cubic-bezier(0.22, 1, 0.36, 1);    /* the press; the squash lives in the keyframes */
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-stamp: 420ms;

  /* Texture. Raster grain, multiplied on paper. */
  --grain: url("img/paper.png");
  --wear:  url("img/wear.png");
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-stamp: 0ms; }
}