/* design-tokens.css — チャットレディindex 共通（BEAMS / pink） */

:root {
  --fp-cream:     oklch(98% 0.008 60);
  --fp-cream-2:   oklch(96% 0.012 60);
  --fp-paper:     oklch(99% 0.005 60);
  --fp-paper-2:   oklch(97% 0.008 60);
  --fp-ink:       oklch(18% 0.010 280);
  --fp-muted:     oklch(52% 0.014 280);
  --fp-pk:        oklch(65% 0.20 350);
  --fp-pk-light:  oklch(94% 0.040 350);
  --fp-pk-dark:   oklch(48% 0.18 350);
  --fp-hero-bg:   oklch(98% 0.008 60);
  --fp-ink-bg:    oklch(16% 0.014 280);

  --fp-font-display: 'Syne', 'Noto Sans JP', sans-serif;
  --fp-font-body:    'DM Sans', 'Noto Sans JP', sans-serif;
  --fp-font-ja:      'Noto Sans JP', sans-serif;
  --fp-font-mono:    'Space Mono', monospace;
  --fp-font-display-weight: 700;

  --fp-container: 1120px;
  --fp-side-pad:  20px;

  /* モダン系CSSとの後方互換 */
  --color-bg:          var(--fp-paper);
  --color-bg-subtle:   var(--fp-cream-2);
  --color-bg-muted:    var(--fp-cream);
  --color-page:        var(--fp-cream);
  --color-surface:     var(--fp-paper);
  --color-border:      oklch(88% 0.02 350);
  --color-border-strong: oklch(82% 0.03 350);
  --color-text:        var(--fp-ink);
  --color-text-secondary: oklch(35% 0.012 280);
  --color-text-muted:  var(--fp-muted);
  --color-primary:     var(--fp-pk);
  --color-primary-hover: var(--fp-pk-dark);
  --color-primary-light: var(--fp-pk-light);
  --font-sans:         var(--fp-font-body);
}

body {
  font-family: var(--fp-font-body);
  -webkit-font-smoothing: antialiased;
}

.l-main,
.l-mainContent,
.l-content,
.p-postContent,
.c-postContent {
  font-family: var(--fp-font-body);
}

.cl-font-display {
  font-family: var(--fp-font-display);
  font-weight: var(--fp-font-display-weight);
}

.cl-font-body { font-family: var(--fp-font-body); }
.cl-font-ja   { font-family: var(--fp-font-ja); }
.cl-font-mono { font-family: var(--fp-font-mono); }