@charset "UTF-8";
/* ================================================================
   tokens.css — デザイントークン
   色・書体・角丸・影・動きの値だけを置く。Cocoon には依存しない。
   article.css と cocoon.css はここの変数を参照するだけで、色を直接書かない。
   ================================================================ */
:root {
  /* 深海カラーパレット */
  --abyss:   #020810;
  --deep:    #050D1A;
  --ocean-1: #071A35;
  --ocean-2: #0A2647;

  /* グロウアクセント */
  --glow-blue: #4FC3F7;
  --glow-teal: #26D0CE;
  --glow-soft: #B3E5FC; /* 装飾専用。文字には使わない */
  --glow-blue-a12: rgba(79, 195, 247, 0.12);
  --glow-blue-a20: rgba(79, 195, 247, 0.20);
  --glow-blue-a30: rgba(79, 195, 247, 0.30);
  --glow-teal-a08: rgba(38, 208, 206, 0.08);
  --glow-teal-a20: rgba(38, 208, 206, 0.20);

  /* テキスト */
  --text-strong: #F4FAFF; /* 見出し */
  --text-primary: #E8F4FF;
  --text-body:  #CFE3F3;  /* 本文。長文でも疲れにくい明るさ */
  --text-muted: #7EB5D6;
  --text-dim:   #5A88A8;

  /* カード */
  --card-bg:           rgba(7, 26, 53, 0.60);
  --card-border:       rgba(79, 195, 247, 0.14);
  --card-hover-border: rgba(79, 195, 247, 0.35);
  --header-bg:         rgba(5, 13, 26, 0.92); /* スクロール中に固定されるヘッダー */

  /* 書体 */
  --font-round: 'M PLUS Rounded 1c', sans-serif; /* 見出し・サイト名・UI */
  --font-body:  'Zen Kaku Gothic New', sans-serif; /* 記事の本文 */
  --font-title: 'Zen Maru Gothic', sans-serif; /* 記事ページのタイトル */
  --font-serif: 'DM Serif Display', serif; /* 欧文専用 */

  /* 形 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* 影 */
  --shadow-glow-sm: 0 0 20px rgba(79, 195, 247, 0.10);
  --shadow-glow-md: 0 0 40px rgba(79, 195, 247, 0.15);
  --shadow-card:    0 4px 24px rgba(2, 8, 16, 0.60);
  --shadow-title:   0 0 40px rgba(79, 195, 247, 0.35);

  /* 動き */
  --ease-float: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 0.22s;
  --dur-mid:  0.40s;
}