/* ============================================================
   tokens.css — 色・影・グラデーションの変数だけを持つ
   クロラボのブランドトークン（kurorabo.com の :root）に合わせている。
   🚨 色を足すときは必ずここに。他のCSSに生の色を書かない。
   ============================================================ */

:root {
  /* ブランド */
  --blue: #4A7FE5;
  --blue-deep: #3360C4;
  --blue-light: #E8EFFC;
  --blue-tint: #F2F6FE;
  --purple: #8B7CF6;
  --purple-light: #F0EDFE;
  --accent: #F08C3A;
  --accent-soft: #FDF1E3;

  /* 面 */
  --bg: #FFFFFF;
  --bg-soft: #F7F8FB;
  --card: #FFFFFF;
  --hero: linear-gradient(180deg, #F4F0FE 0%, #E8EFFC 100%);

  /* 文字 */
  --text: #1A1F2E;
  --text-sub: #4E5668;
  --text-mute: #858DA0;
  --on-blue: #FFFFFF;
  --on-purple: #FFFFFF;
  --on-accent: #FFFFFF;

  /* 線・影 */
  --border: #E3E7EF;
  --border-strong: #CFD6E4;
  --shadow: 0 1px 2px rgba(26, 31, 46, .04), 0 6px 24px rgba(26, 31, 46, .06);
  --shadow-lift: 0 10px 30px rgba(74, 127, 229, .28);

  /* 図版の下地（ストライプ） */
  --stripe: rgba(26, 31, 46, .055);

  /* 角丸 */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* 書体 */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* OSがダーク、かつ利用者が明示的にライトを選んでいない場合 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue: #7BA3F0;
    --blue-deep: #A8C2F5;
    --blue-light: #1E2740;
    --blue-tint: #171E31;
    --purple: #A899F8;
    --purple-light: #241F3D;
    --accent: #F2A25C;
    --accent-soft: #33271A;

    --bg: #12151F;
    --bg-soft: #191D2A;
    --card: #1B2030;
    --hero: linear-gradient(180deg, #1C1B2E 0%, #161C2E 100%);

    --text: #E8EBF2;
    --text-sub: #AFB7C8;
    --text-mute: #79829A;
    --on-blue: #10131C;
    --on-purple: #10131C;
    --on-accent: #10131C;

    --border: #2A3145;
    --border-strong: #3A4460;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .32);
    --shadow-lift: 0 10px 30px rgba(0, 0, 0, .5);

    --stripe: rgba(232, 235, 242, .07);
  }
}

/* 利用者が明示的にダークを選んだ場合（OS設定より優先） */
:root[data-theme="dark"] {
  --blue: #7BA3F0;
  --blue-deep: #A8C2F5;
  --blue-light: #1E2740;
  --blue-tint: #171E31;
  --purple: #A899F8;
  --purple-light: #241F3D;
  --accent: #F2A25C;
  --accent-soft: #33271A;

  --bg: #12151F;
  --bg-soft: #191D2A;
  --card: #1B2030;
  --hero: linear-gradient(180deg, #1C1B2E 0%, #161C2E 100%);

  --text: #E8EBF2;
  --text-sub: #AFB7C8;
  --text-mute: #79829A;
  --on-blue: #10131C;
  --on-purple: #10131C;
  --on-accent: #10131C;

  --border: #2A3145;
  --border-strong: #3A4460;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .32);
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, .5);

  --stripe: rgba(232, 235, 242, .07);
}