/* AI交換日記 — design tokens
   Generated from refs/project/tokens.json (version 2).
   Do not hand-edit values here; change tokens.json first. */

:root {
  /* --- color --- */
  --surface-100: #FFFFFF;
  --surface-050: #F2FBF8;
  --ink: #2C3A37;
  --ink-muted: #5F706C;
  --border: #DCEAE6;
  --accent: #5BC8AC;
  --on-accent: var(--ink);
  --accent-soft: #98DBC6;
  --accent-deep: #2A7A66;
  --danger: #B3261E;

  /* Diary cover swatches. Literal values, not aliases of the accent tokens:
     the settings screen shows all five at once, so they must not move when
     the chosen cover retints the accents below. */
  --cover-turquoise: #5BC8AC;
  --cover-aquamarine: #98DBC6;
  --cover-yellow: #E6D72A;
  --cover-pink: #F18D9E;
  --cover-ink: #2C3A37;

  /* --- type --- */
  --font-display: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;

  /* --- spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* --- radius --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* --- shadow --- */
  --shadow-card: 0 1px 2px rgba(44, 58, 55, 0.06), 0 8px 24px rgba(44, 58, 55, 0.08);
}

/* --- type scale --- */

.display-lg {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
}

.display-sm {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
}

.heading {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
}

.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

.button {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}

/* --- cover themes ---

   The cover chosen in Settings colors every screen, not only the cover panel.
   Each block redefines the accent family and the page tint, so every component
   already built on those tokens follows with no per-screen work — and each
   theme's --accent *is* its cover color, which is why the cover panel can just
   fill with it.

   Turquoise is the default above, so it needs no block. Every pair here was
   checked against ink (#2C3A37), ink-muted (#5F706C) and white: the lowest
   ratio in the set is 4.85:1, so all of them clear AA. */

:root[data-cover='aquamarine'] {
  --accent: #98DBC6;
  --accent-soft: #C8EADF;
  --accent-deep: #1F6C59;
  --surface-050: #F1FAF6;
}

:root[data-cover='yellow'] {
  --accent: #E6D72A;
  --accent-soft: #F4EDA6;
  --accent-deep: #6B6210;
  --surface-050: #FCFAEC;
}

:root[data-cover='pink'] {
  --accent: #F18D9E;
  --accent-soft: #FAD3DA;
  --accent-deep: #A33049;
  --surface-050: #FEF5F6;
}

/* The one cover dark enough that ink text disappears into it, so its fills
   carry light text instead. */
:root[data-cover='ink'] {
  --accent: #2C3A37;
  --accent-soft: #D5E2DE;
  --accent-deep: #24302E;
  --on-accent: #FFFFFF;
  --surface-050: #F4F7F6;
}