/* ─────────────────────────────────────────────
   SUMIRE — Design tokens
   くすみすみれ色 × セリフ × 余白の効いた大人な空気
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Italiana&family=Klee+One:wght@400;600&family=Yomogi&display=swap');

:root {
  /* ── Color: Sumire (dusty violet) ── */
  --ink:         #1E1428;   /* aubergine ink */
  --ink-soft:    #3D2E52;
  --sumire-900:  #2A1E3D;
  --sumire-700:  #4A3868;
  --sumire-500:  #7B6BA8;   /* PRIMARY brand */
  --sumire-400:  #9685C0;
  --sumire-300:  #B5A4D2;
  --sumire-200:  #D2C6E5;
  --sumire-100:  #E8DFF2;
  --sumire-50:   #F5F0F8;

  /* ── Neutrals: warm paper ── */
  --paper:       #FAF6F1;   /* main background */
  --paper-2:     #F4ECE3;   /* card alt */
  --paper-3:     #ECE3D7;
  --line:        #E2D5C5;   /* hairline */
  --line-soft:   #EFE6D9;
  --mute:        #8B7A6A;   /* secondary text */
  --mute-soft:   #B5A493;

  /* ── Accents ── */
  --rose:        #C99BAA;   /* dusty rose */
  --rose-deep:   #A6677A;
  --rose-light:  #E8CDD5;
  --sage:        #9DAE94;   /* online / success */
  --sage-deep:   #6B7F62;
  --gold:        #B8956A;   /* premium / star */
  --coral:       #D89175;

  /* ── Type ── */
  --font-jp-serif:  "Shippori Mincho B1", "游明朝", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  --font-jp-sans:   "Noto Sans JP", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Sans", system-ui, sans-serif;
  --font-lt-serif:  "Cormorant Garamond", "Shippori Mincho B1", Georgia, serif;
  --font-lt-display:"Italiana", "Cormorant Garamond", serif;
  --font-hand:      "Klee One", "Shippori Mincho B1", cursive;
  --font-hand-casual:"Yomogi", "Klee One", cursive;

  /* ── Radii ── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-card:28px;

  /* ── Shadows ── */
  --sh-1: 0 1px 2px rgba(45, 25, 60, 0.04), 0 2px 8px rgba(45, 25, 60, 0.04);
  --sh-2: 0 4px 12px rgba(45, 25, 60, 0.06), 0 12px 32px rgba(45, 25, 60, 0.05);
  --sh-3: 0 12px 32px rgba(45, 25, 60, 0.10), 0 24px 64px rgba(45, 25, 60, 0.08);
  --sh-glow: 0 0 0 4px rgba(123, 107, 168, 0.16);
}

/* Phone canvas reset — every screen lives inside <div class="phone-screen"> */
.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-jp-sans);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}

.phone-screen *,
.phone-screen *::before,
.phone-screen *::after { box-sizing: border-box; }

/* Type roles */
.t-display { font-family: var(--font-jp-serif); font-weight: 500; letter-spacing: 0.04em; }
.t-display-lt { font-family: var(--font-lt-display); letter-spacing: 0.08em; }
.t-serif { font-family: var(--font-jp-serif); }
.t-serif-lt { font-family: var(--font-lt-serif); }
.t-sans { font-family: var(--font-jp-sans); }
.t-micro { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-lt-serif); font-weight: 500; }

/* Image treatment — give all photos the same dusty/film look */
.photo {
  filter: saturate(0.82) brightness(1.02) contrast(0.96);
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

/* Grain overlay utility */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1, 0 0 0 0 0.07, 0 0 0 0 0.15, 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

/* Hairline underline used for headers */
.hairline {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 0.5px solid currentColor;
}

/* No-grain mode (tweakable) */
.no-grain .grain::after { display: none; }
.no-grain .grain { background-image: none !important; }