/* tokens.css — palette, type scale, spacing, grain, focus. Owned by P1 shell. */

:root {
  /* palette (locked in PROGRAM-DESIGN.md) */
  --sumi: #0E0B08;
  --amber: #F2A93B;
  --shoyu: #C0392B;
  --washi: #F5EDDD;

  --sumi-soft: #17120D;
  --sumi-line: rgba(245, 237, 221, 0.14);
  --washi-dim: rgba(245, 237, 221, 0.62);
  --washi-faint: rgba(245, 237, 221, 0.32);

  /* type */
  --font-display: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Songti SC', Georgia, 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* fluid scale, 390px base */
  --t-xs: clamp(0.68rem, 2.8vw, 0.8rem);
  --t-sm: clamp(0.8rem, 3.4vw, 0.95rem);
  --t-md: clamp(0.95rem, 4.2vw, 1.15rem);
  --t-lg: clamp(1.25rem, 6vw, 1.6rem);
  --t-xl: clamp(1.75rem, 9vw, 2.4rem);
  --t-2xl: clamp(2.4rem, 13vw, 3.6rem);

  /* spacing */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.85rem;
  --s4: 1.35rem;
  --s5: 2.1rem;
  --s6: 3.4rem;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 480ms;

  /* chrome */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dots-h: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}

/* paper grain — one shared overlay, no per-act copies */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

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