/* =========================================================
   WHO AM I? — Persona Atlas
   THEME PRESETS
   ---------------------------------------------------------
   構造（HTML）は全ユーザー共通。ここで変えるのは「見せ方」だけ。

   使い方：
     <html data-theme="pop-soft">

   予備プリセット：
     pop / soft / editorial / modern / classic / bold
     pop-soft  … #000 CHIHIRO（Pop + Soft + 少し Editorial）

   2軸で組み合わせることもできます：
     <html data-style="modern" data-tone="sharp">
       data-style … 書体・字間・行間・色の使い方
       data-tone  … 角丸・余白・影・装飾の強さ
       data-accent… 小さな味付け（現在は editorial のみ）

   ・ここに書くのは「トークンの上書き」と、テーマ固有の最小限の調整だけ。
   ・レイアウトや情報の順番は style.css 側で共通です。
   ========================================================= */

/* =========================================================
   1. STYLE LAYER — 書体・字間・行間・色の使い方
   ========================================================= */

/* --- Pop : 丸みのある見出し、大きめ、色が前に出る --- */
[data-style="pop"],
[data-theme="pop"],
[data-theme="pop-soft"]{
  --f-display: var(--f-jp-rounded);
  --f-body: var(--f-jp-gothic);
  --display-weight: 700;
  --display-track: .01em;
  --display-scale: 1.05;
  --display-lh: 1.5;
  --body-track: .02em;
  --body-lh: 1.95;
  --label-track: .2em;
  --num-color: var(--c2-deep);
  --accent-color: var(--c1-deep);
  --hl: color-mix(in srgb, var(--c1) 52%, white);
  --card-bg: #FFFEFB;
}

/* --- Plain : 無装飾で素直。Soft の下地 --- */
[data-style="plain"],
[data-theme="soft"]{
  --f-display: var(--f-jp-rounded);
  --f-body: var(--f-jp-gothic);
  --display-weight: 500;
  --display-track: .04em;
  --display-scale: 1;
  --display-lh: 1.6;
  --body-track: .03em;
  --body-lh: 2.05;
  --label-track: .24em;
  --num-color: var(--ink-3);
  --accent-color: var(--c1-deep);
  --hl: var(--c1-pale);
}

/* --- Editorial : 明朝。罫線と字間で見せる --- */
[data-style="editorial"],
[data-theme="editorial"]{
  --f-display: var(--f-jp-mincho);
  --f-body: var(--f-jp-mincho);
  --display-weight: 600;
  --display-track: .08em;
  --display-scale: .98;
  --display-lh: 1.7;
  --body-track: .05em;
  --body-lh: 2.15;
  --label-track: .3em;
  --num-color: var(--ink);
  --accent-color: var(--ink);
  --hl: transparent;
  --card-bg: #FFFFFF;
  --band: #FFFFFF;
  --img-blend: normal;
  --img-radius: 0px;
  --img-bg: transparent;
  --img-border: 1px solid var(--line-2);
}

/* --- Modern : 幾何的なサンセリフ、詰め、高コントラスト --- */
[data-style="modern"],
[data-theme="modern"]{
  --f-display: var(--f-jp-gothic);
  --f-body: var(--f-jp-gothic);
  --display-weight: 700;
  --display-track: -.01em;
  --display-scale: 1.02;
  --display-lh: 1.45;
  --body-track: .01em;
  --body-lh: 1.85;
  --label-track: .34em;
  --num-color: var(--ink);
  --accent-color: var(--c2-deep);
  --hl: transparent;
  --band: #F2F4F3;
  --dark-bg: #0E1513;
  --img-blend: normal;
  --img-bg: #FFFFFF;
  --img-border: none;
}

/* --- Classic : 明朝＋大きな字間、中央寄せ、額装 --- */
[data-style="classic"],
[data-theme="classic"]{
  --f-display: var(--f-jp-mincho);
  --f-body: var(--f-jp-mincho);
  --display-weight: 400;
  --display-track: .14em;
  --display-scale: .96;
  --display-lh: 1.85;
  --body-track: .06em;
  --body-lh: 2.2;
  --label-track: .34em;
  --head-align: center;
  --num-color: var(--ink);
  --accent-color: #2F5D4E;
  --hl: transparent;
  --paper: #FBF7EE;
  --band: #F5EFE1;
  --card-bg: #FFFDF8;
  --img-blend: normal;
  --img-bg: var(--paper);
  --img-border: 1px solid var(--line-2);
  --img-radius: 0px;
  --dark-bg: #1B2A33;
}

/* --- Bold : 極太・大きな文字・面で見せる --- */
[data-style="bold"],
[data-theme="bold"]{
  --f-display: var(--f-jp-gothic);
  --f-body: var(--f-jp-gothic);
  --display-weight: 900;
  --display-track: -.015em;
  --display-scale: 1.18;
  --display-lh: 1.35;
  --body-track: .01em;
  --body-lh: 1.8;
  --label-track: .26em;
  --num-color: var(--ink);
  --accent-color: var(--ink);
  --hl: var(--c1);
  --paper: #FFFFFF;
  --band: #D9F3E7;
  --card-bg: #FFFFFF;
  --dark-bg: #101514;
  --img-blend: normal;
  --img-bg: #FFFFFF;
  --img-border: none;
}

/* =========================================================
   2. TONE LAYER — 角丸・余白・影・装飾の強さ
   ========================================================= */

/* --- Soft : 丸く、広く、やわらかく --- */
[data-tone="soft"],
[data-theme="soft"],
[data-theme="pop"],
[data-theme="pop-soft"]{
  --r-card: 20px;
  --r-media: 10px;
  --r-chip: 7px;
  --r-swatch: 12px;
  --r-btn: 999px;
  --pad-card: 16px;
  --gap-item: 42px;
  --sec-pad: 74px;
  --card-rotate: -2deg;
  --card-shadow: 0 24px 48px -30px rgba(30,60,50,.42);
  --grain: .30;
  --decor: .9;
  --rule-weight: 1px;
}

/* --- Crisp : 角を立て、余白を締める --- */
[data-tone="crisp"],
[data-theme="editorial"],
[data-theme="modern"],
[data-theme="classic"]{
  --r-card: 6px;
  --r-media: 2px;
  --r-chip: 2px;
  --r-swatch: 2px;
  --r-btn: 2px;
  --pad-card: 14px;
  --gap-item: 34px;
  --sec-pad: 62px;
  --card-rotate: 0deg;
  --card-shadow: 0 14px 34px -28px rgba(20,30,28,.55);
  --grain: .20;
  --decor: .45;
  --rule-weight: 1px;
}

/* --- Sharp : 角丸なし、装飾なし、面で見せる --- */
[data-tone="sharp"],
[data-theme="bold"]{
  --r-card: 0px;
  --r-media: 0px;
  --r-chip: 0px;
  --r-swatch: 0px;
  --r-btn: 0px;
  --pad-card: 22px;
  --gap-item: 26px;
  --sec-pad: 54px;
  --card-rotate: 0deg;
  --card-shadow: none;
  --grain: .12;
  --decor: .2;
  --rule-weight: 2px;
}

/* =========================================================
   3. ACCENT LAYER — 少しだけ足す味付け
   ========================================================= */

/* --- Editorial accent : 要所だけ明朝と罫線に戻す（CHIHIROで使用） --- */
[data-accent="editorial"],
[data-theme="pop-soft"]{
  --sec-label-serif: 1;      /* セクションラベルを欧文セリフにする */
}

[data-accent="editorial"] .what__lead,
[data-theme="pop-soft"] .what__lead,
[data-accent="editorial"] .what__concept,
[data-theme="pop-soft"] .what__concept{
  font-family: var(--f-jp-mincho);
  font-weight: 600;
  letter-spacing: .05em;
}

[data-accent="editorial"] .sec-label,
[data-theme="pop-soft"] .sec-label{
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .3em;
}

[data-accent="editorial"] .about__text p,
[data-theme="pop-soft"] .about__text p{
  letter-spacing: .045em;
}

/* =========================================================
   4. テーマ固有の最小限の調整
      （トークンで表せない“見せ方”だけをここに書く）
   ========================================================= */

/* --- 画像の枠まわり：共通の受け皿 --- */
.theme-media,
.pa__media,
.work__media,
.what__fig img,
.pcard__fig{
  background: var(--img-bg, var(--paper-3));
  border: var(--img-border, none);
  border-radius: var(--img-radius, var(--r-media));
}
.pa__media img,
.work__media img,
.what__fig img,
.pcard__fig img{
  mix-blend-mode: var(--img-blend, multiply);
}

/* --- Editorial：罫線を主役に --- */
[data-theme="editorial"] .pa--lead .pa__media,
[data-theme="editorial"] .pa--wide .pa__media,
[data-theme="editorial"] .pa--side .pa__media,
[data-theme="editorial"] .pa--half .pa__media,
[data-theme="editorial"] .work__media{
  padding: 10px;
}
[data-theme="editorial"] .pa--color .pa__swatch{ background: var(--ink); }
[data-theme="editorial"] .swatch__hex,
[data-theme="editorial"] .pa__jp,
[data-theme="editorial"] .pcard__motif,
[data-theme="editorial"] .work__state{ color: var(--ink-2); }

/* --- Modern：画像は面で置く、ラベルは大きく開ける --- */
[data-theme="modern"] .pa--lead .pa__media,
[data-theme="modern"] .pa--wide .pa__media,
[data-theme="modern"] .pa--half .pa__media,
[data-theme="modern"] .work__media{ border-radius: 0; }
[data-theme="modern"] .sec-label{ font-family: var(--f-jp-gothic); font-weight: 700; }

/* --- Classic：中央寄せ、額装、飾り罫 --- */
[data-theme="classic"] .sec-label{ justify-content: center; }
[data-theme="classic"] .sec-label::after{ display: none; }
[data-theme="classic"] .pa__media,
[data-theme="classic"] .work__media{ padding: 12px; }
[data-theme="classic"] .pa__media img,
[data-theme="classic"] .work__media img{ border: 1px solid var(--line); }
[data-theme="classic"] .pcard{ transform: none; }
[data-theme="classic"] .chips{ display: none; }

/* --- Bold：色の面を大きく使う --- */
[data-theme="bold"] .pa--food{ background: var(--c1); }
[data-theme="bold"] .pa--color .pa__swatch{ background: var(--c1); }
[data-theme="bold"] .pa--lead .pa__en,
[data-theme="bold"] .pa__en{ letter-spacing: -.02em; }

/* --- Soft：影も罫線も、できるだけ薄く --- */
[data-theme="soft"] .pcard{ box-shadow: 0 18px 40px -34px rgba(30,60,50,.4); }
[data-theme="soft"] .hero__note{ border-left-color: var(--line); }
[data-theme="soft"] .hero__nameline::before{ opacity: .6; }

/* --- Pop：モチーフとマーカーを少し強く --- */
[data-theme="pop"] .pcard__sprig,
[data-theme="pop-soft"] .pcard__sprig{ opacity: 1; }
[data-theme="pop"] .hero__tag,
[data-theme="pop-soft"] .hero__tag{ background-size: 100% 100%; }

/* =========================================================
   5. PLATFORM — 人物ページではない共通画面
      白ベース／無装飾／視認性優先
      使い方： <html data-theme="platform">
      ※ 個人ページの色（--c1…）は使わない。
        色は「その人のカード」側だけが持つ。
   ========================================================= */
[data-theme="platform"]{
  --f-display: var(--f-jp-gothic);
  --f-body:    var(--f-jp-gothic);
  --f-accent:  var(--f-jp-gothic);
  --display-weight: 700;
  --display-track: -.01em;
  --display-scale: 1;
  --display-lh: 1.55;
  --body-track: .02em;
  --body-lh: 1.9;
  --label-track: .24em;

  --paper:   var(--ui-bg);
  --paper-2: #F7F9F8;
  --paper-3: #EFF3F1;
  --band:    #F7F9F8;
  --ink:     var(--ui-ink);
  --ink-2:   #4A5754;
  --ink-3:   var(--ui-muted);
  --line:    var(--ui-line);
  --line-2:  #DCE3E0;
  --dark-bg: #101614;
  --dark-ink:#EEF4F1;

  --hl: transparent;
  --accent-color: var(--ui-ink);
  --num-color: var(--ui-muted);
  --card-bg: #FFFFFF;
  --card-border: 1px solid var(--ui-line);

  --r-card: 14px;
  --r-media: 10px;
  --r-chip: 6px;
  --r-swatch: 10px;
  --r-btn: 999px;
  --pad-card: 14px;
  --gap-item: 26px;
  --sec-pad: 68px;
  --card-rotate: 0deg;
  --card-shadow: 0 18px 40px -34px rgba(20,30,28,.45);
  --rule-weight: 1px;

  --grain: 0;
  --decor: 0;

  --img-bg: var(--paper-3);
  --img-border: none;
  --img-radius: var(--r-media);
  --img-blend: multiply;
}