/* ==========================================================================
   パパママnavi — Design Tokens
   Source: uploads/design_guide.docx (§2 colour, §3 type, §4 layout, §5 components)
   8-pixel grid throughout. Pastel-first palette. Mobile-first scale.
   ========================================================================== */

/* -- Webfonts: loaded via wp_enqueue_style in functions.php (non-render-blocking) -- */

:root {
  /* ----- Brand colours (§2-1) ------------------------------------------- */
  --pm-primary:        #6FB3D2;  /* 優しい水色 — header / main CTA */
  --pm-primary-hover:  #5BA0C2;  /* CTA hover (spec §5.1) */
  --pm-primary-press:  #4F92B4;
  --pm-primary-soft:   #E3F0F7;  /* primary tint for chips, hovers */

  --pm-secondary:        #F5B9B9; /* やわらかピンク — accents, favourites */
  --pm-secondary-hover:  #EFA6A6;
  --pm-secondary-soft:   #FBE8E8;

  --pm-accent:        #F9CF7B;    /* やさしい黄色 — badges, highlights */
  --pm-accent-hover:  #F4C062;
  --pm-accent-soft:   #FDEFCE;

  /* ----- Surfaces & text ----------------------------------------------- */
  --pm-base:        #FDFBF7;      /* クリーム白 — page background, NEVER pure white */
  --pm-surface:     #FFFFFF;      /* card surface (still warm next to base) */
  --pm-surface-2:   #F7F2EA;      /* sunken surfaces, code blocks */
  --pm-border:      #EDE7DC;      /* hairline border, warm cream-grey */
  --pm-border-strong:#D8CFBE;

  --pm-text:        #3D3D3D;      /* ソフト黒 — body */
  --pm-text-sub:    #8A8A8A;      /* ミドルグレー — captions, hints */
  --pm-text-on-primary: #FFFFFF;

  /* ----- Semantic / functional (§2-2) ---------------------------------- */
  --pm-success:     #7FBF7F;      /* 成功・大吉 — never use a strong green */
  --pm-success-soft:#E1F1E1;

  --pm-warning:     #E89C7C;      /* 注意・凶 — orange, NEVER red */
  --pm-warning-soft:#FAE2D6;

  --pm-info:        #9DBFE3;      /* 情報・中吉 */
  --pm-info-soft:   #E5EEF8;

  /* Gender / "either" badges — always paired with a shape + label, never colour alone */
  --pm-boy:         #A8CDE8;
  --pm-boy-soft:    #E5F0F8;
  --pm-girl:        #F5C2D1;
  --pm-girl-soft:   #FBE7EC;
  --pm-either:      #C8B9E0;      /* lavender */
  --pm-either-soft: #ECE5F4;

  /* ----- Type families (§3-1) ------------------------------------------ */
  --pm-font-body:    'Noto Sans JP', system-ui, -apple-system, 'Hiragino Sans', 'Meiryo', sans-serif;
  --pm-font-heading: 'Zen Maru Gothic', 'Noto Sans JP', system-ui, sans-serif;
  --pm-font-num:     'Inter', system-ui, -apple-system, sans-serif;

  /* ----- Type scale (§3-2) — PC values; SP values overridden in @media -- */
  --pm-h1: 32px; --pm-h1-lh: 1.4; --pm-h1-w: 700;
  --pm-h2: 24px; --pm-h2-lh: 1.4; --pm-h2-w: 700;
  --pm-h3: 20px; --pm-h3-lh: 1.5; --pm-h3-w: 600;
  --pm-body: 16px; --pm-body-lh: 1.8; --pm-body-w: 400;  /* 1.8 line-height is mandatory */
  --pm-caption: 13px; --pm-caption-lh: 1.6; --pm-caption-w: 400;

  /* ----- Spacing — 8px grid (§4) --------------------------------------- */
  --pm-space-1: 4px;
  --pm-space-2: 8px;
  --pm-space-3: 16px;
  --pm-space-4: 24px;
  --pm-space-5: 32px;
  --pm-space-6: 48px;     /* SP section gap */
  --pm-space-7: 64px;
  --pm-space-8: 80px;     /* PC section gap */

  --pm-container: 1200px;
  --pm-gutter-sp: 16px;
  --pm-tap-min: 44px;      /* min touch target */

  /* ----- Radii (§5-1, §5-2) -------------------------------------------- */
  --pm-radius-sm: 8px;
  --pm-radius-btn: 12px;   /* not 8 (硬い), not 16 (幼稚) */
  --pm-radius-card: 16px;
  --pm-radius-pill: 9999px;

  /* ----- Elevation — exactly two levels (§5-2) ------------------------- */
  --pm-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.04);     /* resting card */
  --pm-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06);    /* hover lift */
  --pm-shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* ----- Motion (§11 — gentle only) ------------------------------------ */
  --pm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pm-dur-1: 150ms;
  --pm-dur-2: 200ms;
  --pm-dur-3: 250ms;

  /* ----- Component sizes ----------------------------------------------- */
  --pm-btn-h-pc: 48px;
  --pm-btn-h-sp: 52px;
  --pm-input-h: 52px;
  --pm-modal-backdrop: rgba(0, 0, 0, 0.4);

  /* ----- RGB triplet companions (additive — for Tailwind opacity) ------ */
  /* Tailwind v3 の `bg-primary/40` 等の opacity 修飾子は RGB トリプレットを
     必要とする。デザイン値（hex）と同色の RGB 表現をここで提供する。 */
  --pm-primary-rgb:   111 179 210;
  --pm-secondary-rgb: 245 185 185;
  --pm-accent-rgb:    249 207 123;
  --pm-success-rgb:   127 191 127;
  --pm-warning-rgb:   232 156 124;
  --pm-info-rgb:      157 191 227;
  --pm-boy-rgb:       168 205 232;
  --pm-girl-rgb:      245 194 209;
  --pm-either-rgb:    200 185 224;
  --pm-text-rgb:      61 61 61;
  --pm-text-sub-rgb:  138 138 138;
}

/* SP type scale overrides (§3-2) ------------------------------------------ */
@media (max-width: 767px) {
  :root {
    --pm-h1: 24px;
    --pm-h2: 20px;
    --pm-h3: 18px;
    --pm-body: 15px;
    --pm-caption: 12px;
  }
}

/* ==========================================================================
   Semantic element styles — apply to bare HTML where possible
   ========================================================================== */

html {
  background: var(--pm-base);
  color: var(--pm-text);
  font-family: var(--pm-font-body);
  font-size: var(--pm-body);
  line-height: var(--pm-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--pm-base);
  color: var(--pm-text);
}

h1, h2, h3, h4 {
  font-family: var(--pm-font-heading);
  color: var(--pm-text);
  margin: 0 0 var(--pm-space-3) 0;
  letter-spacing: 0.01em;
}

h1 { font-size: var(--pm-h1); line-height: var(--pm-h1-lh); font-weight: var(--pm-h1-w); }
h2 { font-size: var(--pm-h2); line-height: var(--pm-h2-lh); font-weight: var(--pm-h2-w); }
h3 { font-size: var(--pm-h3); line-height: var(--pm-h3-lh); font-weight: var(--pm-h3-w); }

p   { margin: 0 0 var(--pm-space-3) 0; }
small, .pm-caption { font-size: var(--pm-caption); line-height: var(--pm-caption-lh); color: var(--pm-text-sub); }

a {
  color: var(--pm-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--pm-dur-1) var(--pm-ease);
}
a:hover { color: var(--pm-primary-hover); }

.pm-num { font-family: var(--pm-font-num); font-feature-settings: "tnum"; }

/* Focus — visible everywhere, WCAG AA */
:focus-visible {
  outline: 2px solid var(--pm-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Reusable component classes (used by preview/ cards & UI kit)
   ========================================================================== */

/* Buttons -- minimum 44px tap, 48 PC / 52 SP per spec ---------------------- */
.pm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--pm-btn-h-pc); min-width: var(--pm-tap-min);
  padding: 0 var(--pm-space-4);
  border-radius: var(--pm-radius-btn);
  font-family: var(--pm-font-heading);
  font-size: 16px; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer; user-select: none;
  transition: background var(--pm-dur-1) var(--pm-ease),
              transform var(--pm-dur-1) var(--pm-ease),
              box-shadow var(--pm-dur-1) var(--pm-ease);
}
@media (max-width: 767px) { .pm-btn { height: var(--pm-btn-h-sp); width: 100%; } }

.pm-btn--primary { background: var(--pm-primary); color: var(--pm-text-on-primary); }
.pm-btn--primary:hover { background: var(--pm-primary-hover); }
.pm-btn--primary:active { background: var(--pm-primary-press); transform: translateY(1px); }

.pm-btn--secondary { background: var(--pm-surface); color: var(--pm-primary); border-color: var(--pm-primary); }
.pm-btn--secondary:hover { background: var(--pm-primary-soft); }

.pm-btn--ghost { background: transparent; color: var(--pm-text); }
.pm-btn--ghost:hover { background: var(--pm-surface-2); }

.pm-btn--accent { background: var(--pm-accent); color: var(--pm-text); }
.pm-btn--accent:hover { background: var(--pm-accent-hover); }

.pm-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Inputs ------------------------------------------------------------------ */
.pm-input {
  width: 100%; height: var(--pm-input-h);
  padding: 0 var(--pm-space-3);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-btn);
  font-family: var(--pm-font-body); font-size: 16px;
  color: var(--pm-text);
  transition: border-color var(--pm-dur-1) var(--pm-ease), box-shadow var(--pm-dur-1) var(--pm-ease);
}
.pm-input::placeholder { color: var(--pm-text-sub); }
.pm-input:focus { outline: none; border-color: var(--pm-primary); box-shadow: 0 0 0 3px var(--pm-primary-soft); }
.pm-input--error { border-color: var(--pm-warning); }

/* Card -------------------------------------------------------------------- */
.pm-card {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-card);
  box-shadow: var(--pm-shadow-1);
  padding: var(--pm-space-4);
  transition: transform var(--pm-dur-2) var(--pm-ease), box-shadow var(--pm-dur-2) var(--pm-ease);
}
.pm-card--hoverable:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-2); }

/* Badges & pills ---------------------------------------------------------- */
.pm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--pm-radius-pill);
  font-size: 12px; font-weight: 600;
  background: var(--pm-surface-2); color: var(--pm-text-sub);
}
.pm-badge--boy    { background: var(--pm-boy-soft);    color: #4A7BA0; }
.pm-badge--girl   { background: var(--pm-girl-soft);   color: #B5708B; }
.pm-badge--either { background: var(--pm-either-soft); color: #76639B; }
.pm-badge--success { background: var(--pm-success-soft); color: #4A8A4A; }
.pm-badge--warning { background: var(--pm-warning-soft); color: #B26447; }
.pm-badge--info    { background: var(--pm-info-soft);    color: #4A7BA0; }

/* Alerts ------------------------------------------------------------------ */
.pm-alert {
  display: flex; gap: 12px;
  padding: 16px;
  border-radius: var(--pm-radius-card);
  border: 1px solid var(--pm-border);
  background: var(--pm-surface);
  font-size: 14px; line-height: 1.7;
}
.pm-alert--success { background: var(--pm-success-soft); border-color: #C7E3C7; }
.pm-alert--warning { background: var(--pm-warning-soft); border-color: #F2C8B3; }
.pm-alert--info    { background: var(--pm-info-soft);    border-color: #C7D8EC; }