/* CoHours app — design tokens + minimal reset.
   Tokens migrated from ../online-lounge/styles.css :root (inherit principle, SPEC §2-9).
   Do not introduce new raw hex outside this :root. */

:root {
  --paper: #F4F1EA;
  --ink: #1C1B1A;
  --ink-soft: #3A3733;
  --muted: #6B655E;
  --green: #4F6F52;
  --green-soft: #E7EDE4;
  --line: #E2DDD2;
  --white: #FFFFFF;
  --danger: #B4442F;

  /* CTA / accent pigments carried over so app buttons share the LP's shu. */
  --cta: #D94A2B;
  --cta-deep: #C0401F;

  /* System-font stacks (no web fonts): serif headings, sans body — LP parity.
     CJK fallbacks come after Latin so Japanese still renders in a real font. */
  --serif: "Iowan Old Style", Georgia, "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
  --sans: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;

  --gutter: clamp(20px, 5vw, 76px);

  /* Motion vocabulary (SPEC §0b-2): ONE set for the whole app.
     Screens/cards/panels appear like a sheet of paper settling — never
     invent per-screen durations/easings/distances. */
  --motion-duration: 240ms;  /* §0b-1 band: 180–280ms */
  --motion-ease: ease-out;
  --motion-rise: 10px;       /* §0b-1 band: 8–12px */

  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
}

/* ---- minimal reset ---- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;          /* SPEC §2-10: 16px body floor */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, a, input, textarea, select { font: inherit; }
button { color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.15; }
p { margin: 0; }

/* Icons: single-color, inherit currentColor (SPEC §2-9). No emoji. */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* ---- shared motion keyframes (SPEC §0b) ----
   motion-paper-in: opacity + rise, for elements with NO position:fixed
   descendant.
   motion-fade-in / motion-rise-in: split pair for blocks that CONTAIN a
   fixed element (e.g. .action-bar) — a transformed ancestor becomes the
   containing block for position:fixed (commit 8de7ff3), so the ancestor may
   only fade; non-ancestor children carry the rise. All end at transform:none
   so nothing keeps a lasting transform. */
@keyframes motion-paper-in {
  from { opacity: 0; transform: translateY(var(--motion-rise)); }
  to   { opacity: 1; transform: none; }
}
/* Arrival utility: put .paper-in on any block whose appearance is a "sheet
   set down" moment. A CSS animation restarts whenever the element goes
   display:none -> shown, so [hidden] toggles re-fire it for free. Never put
   it on an ancestor of position:fixed content — use the fade/rise split. */
.paper-in {
  animation: motion-paper-in var(--motion-duration) var(--motion-ease) both;
}
@keyframes motion-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes motion-rise-in {
  from { transform: translateY(var(--motion-rise)); }
  to   { transform: none; }
}

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