/* ═══════════════════════════════════════════════════════
   base.css — ATELIER PINORIN デザイントークン + 基盤 (v2)
   コンセプト: かわいいポップ × 整った余白 — 可愛いのに濁らない
   ルール: 画面全域を使う / 文字は大きく / 色はカラフルでも整列は厳密
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── ベース（さくら色の紙） ── */
  --paper:        #fffafc;
  --paper-pink:   #fff0f6;   /* セクション用のうすピンク */
  --paper-sky:    #f0f7ff;   /* セクション用のうす水色 */
  --paper-cream:  #fffbef;   /* うすクリーム */
  --ink:          #5a4763;   /* 本文 — やわらかい墨（プラム） */
  --ink-soft:     #8a7793;
  --ink-faint:    #b3a4bd;

  /* ── ポップパレット（ぴのてゃ由来） ── */
  --pink:          #f78fb0;
  --pink-strong:   #f2679a;
  --pink-wash:     #ffe3ee;
  --lavender:      #c9b4ec;
  --lavender-wash: #f0e9fb;
  --sky:           #a9d6f5;
  --sky-wash:      #e3f1fd;
  --halo:          #ffe98c;

  /* ── 一滴のビビッド ── */
  --ruby:         #e0446e;

  /* ── グラデーション ── */
  --grad-idol: linear-gradient(120deg, var(--pink) 0%, var(--lavender) 100%);
  --grad-soft: linear-gradient(120deg, var(--pink-wash) 0%, var(--lavender-wash) 55%, var(--sky-wash) 100%);

  /* ── 線 ── */
  --line:         #f3dbe7;
  --line-strong:  #eac3d6;

  /* ── タイポグラフィ（2026-07-05 オーナー確定） ── */
  /* コピー・見出し = Kaisei Decol（オーナー承認済みデザイン書体）/ 本文 = ヒラギノ角ゴ W3 */
  /* 鉄則: 明朝体・教科書体・ポップ体・ゴシック見出しは使わない */
  --font-display: 'Kaisei Decol', serif;
  --display-weight: 700;
  --font-body:    'hiragino-kaku-gothic-pron', sans-serif;
  --body-bold:    600;   /* ヒラギノ角ゴは W3(300)/W6(600) のみ。700 は指定しない */
  --font-en:      'Baloo 2', 'Verdana', sans-serif;

  /* ── スペーシング（8pxベース） ── */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;

  /* ── レイアウト: 画面全域を使う ── */
  --max-w: min(1720px, 94vw);
  --nav-h: 76px;
  --gutter: clamp(20px, 3vw, 48px);
  --radius: 16px;
  --radius-s: 10px;

  /* ── モーション ── */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══ リセット ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }
b, strong { font-weight: var(--body-bold); }

::selection { background: var(--pink-wash); color: var(--ruby); }

/* ═══ タイポグラフィ基本形 ═══ */

/* 欧文オーバーライン（ポップな柱） */
.overline {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pink-strong);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

/* ═══ レイアウトユーティリティ ═══ */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ═══ スクロールリビール（shared.js が .visible を付与） ═══ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}