/* ==========================================================================
   tokens.css — design tokens, resets, base element styles
   ========================================================================== */

/* Self-hosted, subsetted fonts — only the exact characters used across the
   whole project (Latin text + 6 kanji glyphs + a couple of symbols), not the
   full font families. See /css/fonts/ — no external requests, no Google
   Fonts, nothing leaves the visitor's browser just to render type. */
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Variable.woff2') format('woff2-variations'), url('fonts/Inter-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Shippori Mincho';
  src:url('fonts/ShipporiMincho-Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Shippori Mincho';
  src:url('fonts/ShipporiMincho-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* color */
  --ink-0:#08080a;
  --ink-1:#0f0f12;
  --ink-2:#17171b;
  --ink-3:#212126;
  --ink-4:#2c2c33;
  --paper:#ece7dc;
  --paper-dim:#9c988c;
  --paper-faint:#6b6860;
  --accent:#e2432b;      /* hanko-red, ink-stamp */
  --accent-ink:#1a0602;  /* text-on-accent */
  --accent-dim:#8a2c1f;
  --accent-2:#5c6fa8;    /* ai-iro indigo, secondary */
  --ok:#5fa87a;

  /* shape */
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;

  /* type — system font stacks only. No web fonts, no external requests,
     no third-party ever sees a visitor's IP just for typography. */
  --font-display:'Shippori Mincho', 'Iowan Old Style', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* motion */
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:360ms;
  --dur-page:280ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);

  /* safe area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:var(--ink-0); color:var(--paper);
  font-family:var(--font-body);
  overflow:hidden; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
}
#root{height:100%; width:100%; position:relative;}
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-thumb{background:var(--ink-4); border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

button{font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;}
input, select{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}