/* Design tokens — single source of truth for the palette, type, spacing, radius
   (Design.md §1, §2, §4). Saturated pink/blue are reserved for cursors + active
   state; everything else uses tints or ink/line so the two cursors always pop. */
:root {
  /* Surface — cool photo-paper white, deliberately not cream. */
  --paper:        #F8F9FB;
  --paper-raised: #FFFFFF;
  --ink:          #17181C;
  --ink-soft:     #5B5E68;
  --line:         #E3E5EA;

  /* The two people. */
  --pink:      #FF7BA3;
  --pink-tint: #FFE0EA;
  --blue:      #5FA0FF;
  --blue-tint: #DCEBFF;

  /* Type */
  --font-display: "Pretendard", system-ui, -apple-system, sans-serif;
  --font-body:    "Pretendard", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Mono", "Pretendard", ui-monospace, monospace;

  /* Radius — near-sharp by request. Frames are always 0. */
  --r-frame: 0px;
  --r-ctrl:  4px;
  --r-card:  8px;

  /* Spacing (8px grid) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;

  --shadow-soft: 0 6px 24px rgba(23, 24, 28, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}