/* CoHours V1 prototype -- design tokens.
   SNAPSHOT of cohours-app/public/tokens.css (read-only source, copied on
   2026-07-26). The production file is never imported, linked, or requested at
   runtime; this is a frozen copy so the prototype can be compared against the
   real product without touching it.

   The first block below is verbatim from the snapshot. The second block is
   geometry and motion only. The THIRD block adds two new pigments, which the
   owner asked for on 2026-07-26 so state could be told apart without reading
   the label; see that block for what they mean and why they are only two. */

: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: #B83A1B;
  --cta-soft: #F9ECE6;

  /* System-font stacks (no web fonts): serif headings, sans body. */
  --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;

  /* Motion vocabulary: ONE set for the whole prototype. */
  --motion-duration: 240ms;
  --motion-ease: ease-out;
  --motion-rise: 10px;

  --shadow-soft: 0 6px 20px rgba(28, 27, 26, 0.14);
  --scrim: rgba(28, 27, 26, 0.44);

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

/* ---- prototype-only geometry + timing (no colour) ---------------------- */
:root {
  /* On a notched phone in landscape the side safe areas can exceed the
     ordinary page margin. One shared gutter keeps every screen clear. */
  --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --header-h: 52px;               /* band 44-56 */
  --dock-h: 56px;                 /* band 52-56 + safe area */
  --tap: 44px;                    /* minimum tap target */
  --shortcut-size: 52px;          /* was 60: the tray is a shortcut, not a hero */
  --sheet-row-h: 56px;            /* band 52-64 */
  --sheet-radius: 20px;           /* band 18-20 */
  /* The pinned main-button band, stated ONCE for every screen that has one.
     Context line (18) + gap (6) + button (54) + padding (10 top, 12 bottom)
     + the 1px rule = 101. Focus and the lobby both reserve exactly this much
     under their content and both pin their band at exactly this height, so
     switching tabs cannot move the button or the line above it. */
  --primary-bar-h: 101px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --press-duration: 100ms;        /* band 80-120 */
  --rule: 1px;

  /* Derived washes -- no new hex, mixed from the snapshot palette. */
  --paper-deep: color-mix(in srgb, var(--paper) 88%, var(--ink) 12%);
  --paper-raise: color-mix(in srgb, var(--paper) 96%, var(--white) 4%);
  --ink-faint: color-mix(in srgb, var(--ink) 8%, transparent);
  --green-line: color-mix(in srgb, var(--green) 34%, transparent);
  --cta-line: color-mix(in srgb, var(--cta) 40%, transparent);
  --lab-wash: color-mix(in srgb, var(--green-soft) 70%, var(--paper) 30%);

  /* Avatar grounds: the six circle backgrounds behind Open Peeps faces.
     Same-lightness washi band so no user's ground shouts over another's.
     js/avatar.js reads these six variables (with equal literal fallbacks);
     change them here, not there. */
  --avatar-bg-1: #E7EDE4;   /* = --green-soft */
  --avatar-bg-2: #F9ECE6;   /* = --cta-soft */
  --avatar-bg-3: #E4EDF3;   /* = --ai-wash */
  --avatar-bg-4: #EFE8DA;   /* warm sand */
  --avatar-bg-5: #EAE4F0;   /* soft lavender */
  --avatar-bg-6: #F0EBE3;   /* pale linen */
}

/* ---- state pigments (added 2026-07-26 on the owner's instruction) -------
   The screens told every state apart with a word: 進行中, 予約済み, 静か.
   Colour now carries the difference and the word stops being the only
   signal. Two pigments are added, not five: ai (indigo) and yamabuki
   (amber) are the two the shu/green/sumi set was actually missing, and both
   are traditional pigments that sit with the existing paper rather than a
   generic UI blue and yellow.

   Each one has a -ink variant for text and a -wash variant for fills,
   because the fill weight is never legible as type. Measured against
   --paper #F4F1EA: --ai-ink 7.8:1, --yamabuki-ink 5.3:1 (both clear 4.5:1).

   The five roles, so nothing invents a sixth:
     shu (--cta)  now, live, the one primary action
     green        settled: quiet, reserved by me, done
     ai           scheduled and measured: plans, positions, charts
     yamabuki     what I aimed at: weekly aim, milestones
     sumi/muted   past, archived, inert                                   */
:root {
  --ai: #2A6285;
  --ai-ink: #1F4E6B;
  --ai-wash: #E4EDF3;
  --ai-line: color-mix(in srgb, var(--ai) 38%, transparent);

  /* Three weights, because a pigment that is legible as a 12px word is not
     the same pigment that is legible as a 5px arc. --yamabuki is the fill
     for large areas only; anything thin -- a ring stroke, a bar, a dashed
     line -- uses --yamabuki-mark, which clears 3:1 against both the paper
     and the meter track. Using the raw pigment for thin marks put the
     week's aim at 1.2:1 against its own track, i.e. invisible at arm's
     length, which is the exact failure this whole pass exists to fix. */
  --yamabuki: #E8A33D;
  --yamabuki-mark: #8A5A00;
  --yamabuki-ink: #8A5A00;
  --yamabuki-wash: #FBF0DC;
  --yamabuki-line: color-mix(in srgb, var(--yamabuki) 55%, transparent);

  /* Subject hues. A material is recognised by colour before its title is
     read, so the four are spread across the pigments already in use rather
     than being a new rainbow. Assignment is by hash in components.js. */
  --subject-1: var(--ai);
  --subject-2: var(--green);
  --subject-3: var(--yamabuki-ink);
  --subject-4: var(--cta-deep);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}

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.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Icons: single-colour, inherit currentColor. No emoji, ever. */
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 ---- */
@keyframes motion-paper-in {
  from { opacity: 0; transform: translateY(var(--motion-rise)); }
  to   { opacity: 1; transform: none; }
}
/* fill-mode is deliberately omitted. With `both` the element holds the
   FROM state (opacity 0 / offset) until the animation runs, so anything
   that stops animations -- a throttled background tab, a reduced-motion
   engine, a headless renderer -- leaves the content invisible. Without
   it the resting state IS the visible state and the entrance is purely
   additive. */
.paper-in {
  animation: motion-paper-in var(--motion-duration) var(--motion-ease);
}
@keyframes motion-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes motion-sheet-in {
  from { transform: translateY(100%); }
  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;
  }
}