/**
 * Yoshida Camera — Design tokens
 * 軸: 明朝 / 白銀比(√2) / 暗闇の中の希望の光
 */
@layer lism-base {
  :root {
    /* —— 比率 ——
       白銀比 √2 は「2段ごと」の軸。隣接トークンは √√2 で緩やかに繋ぐ。
       → xs が潰れず、4xl/5xl も飛びすぎない */
    --ratio: 1.41421356237; /* √2 白銀比（メジャー） */
    --ratio-inv: 0.70710678118;
    --ratio-step: 1.189207115; /* √√2 = 2^0.25（隣接ステップ） */
    --ratio-step-inv: 0.84089641525;

    /* —— 色: 暗闇と灯火 —— */
    --base: hsl(28 12% 5%);
    --base-2: hsl(28 10% 9%);
    --text: hsl(40 28% 92%);
    --text-2: hsl(35 12% 58%);
    --divider: hsl(28 10% 16%);
    /* 灯火: 黄金ではなく、薄闇に滲む暖白〜象牙 */
    --brand: hsl(34 18% 64%);
    --accent: hsl(34 18% 64%);
    --link: hsl(34 14% 72%);
    --neutral: hsl(30 6% 42%);
    --shadow: hsl(28 20% 2% / 45%);

    /* 灯火の補助（セマンティック拡張） */
    --light: hsl(36 22% 78%);
    --light-soft: hsl(34 16% 72% / 14%);
    --void: hsl(28 14% 3%);
    /* 画面周辺の暗がり（0〜1。大きいほど縁が深い） */
    --vignette: 0.73;
    /* 周辺光グラデーション: 透明終端 / 最大濃度位置 */
    --vignette-start: 38%;
    --vignette-peak: 57%;
    /* フッターで消えるフェード */
    --vignette-fade: 3000ms;
    /* 周辺光の色: void に青み（青み量は --vignette-blue） */
    --vignette-blue: 0%;
    --vignette-ink: color-mix(
      in srgb,
      var(--void) calc(100% - var(--vignette-blue)),
      hsl(222 32% 14%) var(--vignette-blue)
    );

    /* 1px 線: 左右が溶ける塗り（ハンバーガー・ドロワーナビ等） */
    --line-taper-x: linear-gradient(
      to right,
      transparent 0%,
      currentColor 16%,
      currentColor 84%,
      transparent 100%
    );
    --line-taper-x-muted: linear-gradient(
      to right,
      transparent 0%,
      color-mix(in srgb, var(--divider) 92%, transparent) 14%,
      color-mix(in srgb, var(--divider) 92%, transparent) 86%,
      transparent 100%
    );
    --line-taper-x-emphasis: linear-gradient(
      to right,
      transparent 0%,
      color-mix(in srgb, var(--light) 48%, transparent) 18%,
      color-mix(in srgb, var(--brand) 62%, transparent) 50%,
      color-mix(in srgb, var(--light) 48%, transparent) 82%,
      transparent 100%
    );

    /* —— 書体: 明朝ベース —— */
    --ff--base: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN",
      "Yu Mincho", "YuMincho", serif;
    --ff--accent: "Shippori Mincho", "Noto Serif JP", Georgia, serif;
    --ff--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --fw--light: 400;
    --fw--normal: 500;
    --fw--bold: 700; /* 明朝で差が出るよう 700 を採用（600 は中間ウェイトとして直指定可） */

    /* —— 文字サイズ ——
       m を中心に ×/--ratio-step。2段進むとちょうど √2。
       目安( base=16px ): 2xs≈9.5 / xs≈11.3 / s≈13.5 / m=16 /
       l≈19 / xl≈22.6 / 2xl≈26.9 / 3xl≈32 / 4xl≈38 / 5xl≈45 */
    --fz--base: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
    --fz--m: 1em;
    --fz--s: calc(1em * var(--ratio-step-inv));
    --fz--xs: calc(1em * var(--ratio-step-inv) * var(--ratio-step-inv));
    --fz--2xs: calc(
      1em * var(--ratio-step-inv) * var(--ratio-step-inv) * var(--ratio-step-inv)
    );
    --fz--l: calc(1em * var(--ratio-step));
    --fz--xl: calc(1em * var(--ratio-step) * var(--ratio-step)); /* = √2 */
    --fz--2xl: calc(1em * var(--ratio-step) * var(--ratio-step) * var(--ratio-step));
    --fz--3xl: calc(
      1em * var(--ratio-step) * var(--ratio-step) * var(--ratio-step) * var(--ratio-step)
    ); /* = 2 */
    /* ディスプレイは流体上限で暴れを抑える */
    --fz--4xl: clamp(
      1.9em,
      1.6em + 1.4vw,
      calc(
        1em * var(--ratio-step) * var(--ratio-step) * var(--ratio-step) * var(--ratio-step) *
          var(--ratio-step)
      )
    );
    --fz--5xl: clamp(
      2.15em,
      1.75em + 1.8vw,
      calc(
        1em * var(--ratio-step) * var(--ratio-step) * var(--ratio-step) * var(--ratio-step) *
          var(--ratio-step) * var(--ratio-step)
      )
    );

    /* —— 余白: Lism Fibonacci を維持しつつ単位を白銀比の呼吸に —— */
    --s-unit: 0.5rem;
    --gutter--base: clamp(var(--s30), 4vw, var(--s50));

    /* —— 字間・行間 —— */
    --lts--base: 0.04em;
    --lts--xs: calc(var(--lts--base) - 0.05em);
    --lts--s: calc(var(--lts--base) - 0.025em);
    --lts--l: calc(var(--lts--base) + 0.06em);
    --lts--xl: calc(var(--lts--base) + 0.12em);
    --lh--m: 1.75;
    --lh--l: calc(1 * var(--ratio)); /* ≈1.414 見出し向け */
    --lh--xl: calc(var(--ratio) * var(--ratio-inv) + 1); /* ≈1.707 */

    /* —— 角: 写真サイトはほぼ直角 —— */
    --bdrs--10: 0;
    --bdrs--20: 0;
    --bdrs--30: 0;
    --bdrs--40: 0;
    --bdrs--50: 0;

    /* —— スクロール演出 —— */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-gallery: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 1.15s;
    --dur-slow: 1.55s;
    --dur-gallery: 1.85s;
    --dur-portfolio: 2.45s;
    --reveal-shift-portfolio: calc(var(--s10) * var(--ratio-inv));
    --reveal-shift-gallery: calc(var(--s15) * var(--ratio-inv));
    --reveal-shift: calc(var(--s30) * var(--ratio-inv));
    --reveal-delay: 0s;

    /* Works / Note 本文の縦長 wp:image 表示高さ上限 */
    --entry-portrait-max-h: 1000px;

    /* .b--btn 右端 chevron（mask 用 / 光彩込み表示用） */
    --b--btn-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* 光彩色は --light（#d3c9bb）相当。純白は使わない */
    --b--btn-chevron-glow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cdefs%3E%3Cfilter id='g' x='-80%25' y='-80%25' width='260%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='1.45' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23d3c9bb' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' filter='url(%23g)'/%3E%3C/svg%3E");
    --b--btn-chevron-glow-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cdefs%3E%3Cfilter id='g' x='-100%25' y='-100%25' width='300%25' height='300%25'%3E%3CfeGaussianBlur stdDeviation='2.1' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23d3c9bb' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' filter='url(%23g)'/%3E%3C/svg%3E");
    /* ホバー時（brand 上の黒文字に合わせる） */
    --b--btn-chevron-on-brand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    color-scheme: dark;
  }

  body {
    background-color: var(--base);
    color: var(--text);
    font-family: var(--ff--base);
    font-weight: var(--fw--normal);
    letter-spacing: var(--lts--base);
    line-height: var(--lh--m);
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background: #fff;
    color: var(--void);
  }

  a {
    color: var(--link);
  }
}