/* ============================================================
   おみくじ Design System — Tokens
   ------------------------------------------------------------
   Layer 1  primitive : 生の値。値を定義してよい唯一の場所。
   Layer 2  semantic  : 用途名。画面側はこちらだけを参照する。
   ============================================================ */

:root {

  /* ── Layer 1 / 色 ──────────────────────────────────────
     社殿の色を出所とする。朱＝柱と鳥居、緑青＝銅屋根、
     胡粉＝和紙、墨＝刷り、金＝金具、竹＝御籤棒。          */

  --shu-600:      #A32A22;
  --shu-500:      #D2382C;
  --shu-300:      #E8776C;

  --rokusho-900:  #132420;
  --rokusho-800:  #1A2F29;
  --rokusho-700:  #25423A;

  --gofun-50:     #F7F4EC;
  --gofun-100:    #F2EEE3;
  --gofun-300:    #DCD5C4;

  --sumi-900:     #1E1A16;
  --sumi-600:     #4A4139;
  --sumi-400:     #8B7C63;

  --kin-500:      #B08C45;
  --kin-300:      #CDB077;

  --take-300:     #EBD9B4;
  --take-500:     #C8AE7E;
  --take-700:     #B8996A;

  --void-900:     #2A0F0C;   /* 筒の内側 */

  /* ── Layer 1 / 書体 ────────────────────────────────────
     明朝＝表示と本文（御籤の刷りはすべて明朝）。
     ゴシック＝日付・ラベル・操作系（読み手を案内する文字）。 */

  --face-mincho:  "Shippori Mincho", "Noto Serif JP", "Yu Mincho", "YuMincho",
                  "Hiragino Mincho ProN", "MS PMincho", serif;
  --face-gothic:  "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Sans",
                  "Meiryo", sans-serif;

  /* ── Layer 1 / 字の大きさ（比率 1.18 前後） ───────────── */

  --size-3xs:     0.68rem;
  --size-2xs:     0.72rem;
  --size-xs:      0.78rem;
  --size-sm:      0.86rem;
  --size-md:      0.95rem;
  --size-lg:      1.15rem;
  --size-2xl:     clamp(2.4rem, 11vw, 3.1rem);
  --size-3xl:     clamp(2.6rem, 12vw, 3.4rem);

  /* ── Layer 1 / 字間・行間 ──────────────────────────────
     和文は字間が印象を決めるので、独立したスケールを持たせる。 */

  --tracking-none:    0;
  --tracking-normal:  0.06em;
  --tracking-wide:    0.12em;
  --tracking-wider:   0.20em;
  --tracking-widest:  0.30em;
  --tracking-kanji:   0.42em;   /* 一文字ずつ置く用（筒の題字） */

  --leading-tight:    1;
  --leading-ui:       1.6;
  --leading-tate:     2.1;      /* 縦書き本文 */

  /* ── Layer 1 / 余白（4px 基準） ────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* ── Layer 1 / 角・影 ─────────────────────────────────── */

  --radius-sm:  3px;
  --radius-md:  5px;

  --shadow-raised:  0 18px 34px -14px rgb(0 0 0 / .75);
  --shadow-overlay: 0 20px 40px -18px rgb(0 0 0 / .80);
  --shadow-lifted:  0 10px 20px -10px rgb(0 0 0 / .80);

  /* ── Layer 1 / 動き ───────────────────────────────────── */

  --dur-fast:   200ms;
  --dur-mid:    340ms;
  --dur-slow:   550ms;
  --dur-shake:  620ms;

  --ease-standard: cubic-bezier(.22, .80, .30, 1);
  --ease-shake:    cubic-bezier(.36, .07, .19, .97);
  --ease-pop:      cubic-bezier(.18, .90, .32, 1.2);
  --ease-stamp:    cubic-bezier(.30, 1.50, .50, 1);


  /* ══ Layer 2 / セマンティック ══════════════════════════ */

  --bg-canvas:          var(--rokusho-800);
  --bg-canvas-glow:     var(--rokusho-700);

  --fg-default:         var(--gofun-100);
  --fg-muted:           rgb(242 238 227 / .50);
  --fg-metal:           var(--kin-500);

  --surface-paper:      var(--gofun-100);
  --surface-vessel:     var(--shu-500);
  --surface-vessel-in:  var(--void-900);
  --surface-stick:      linear-gradient(90deg, var(--take-500), var(--take-300) 42%, var(--take-700));

  --fg-on-paper:        var(--sumi-900);
  --fg-on-paper-muted:  var(--sumi-400);
  --fg-on-paper-accent: var(--shu-500);

  --border-hairline:    1px solid rgb(30 26 22 / .22);
  --border-dotted:      1px dotted rgb(30 26 22 / .28);
  --border-metal:       1px solid rgb(176 140 69 / .55);

  --seal-color:         var(--shu-500);
  --seal-opacity:       .82;

  --focus-ring:         2px solid var(--kin-500);
  --focus-offset:       4px;
}