@charset "UTF-8";

/* =================================================================
   variables.css - デザイントークン（カスタムプロパティ）
   F+「ナチュラル・木と土」デザイン
   木 × 苔 × 藤（紫陽花）/ 生成り地 / 明朝見出し × 丸ゴ数字
   ================================================================= */

:root {
  /* --- Colors --- */
  /* 木・土＝素材/構造レイヤー（フッター/ヘッダー地・アイコン等）。テキスト主色ではない */
  --color-wood: #9a6a44;
  --color-wood-dark: #6e4a2c;

  --color-primary: #6f8157;        /* 苔（moss） */
  --color-primary-light: #eaf0df;
  --color-primary-dark: #4e5c3c;
  --color-accent: #a8542f;         /* テラコッタ＝行動色（白文字とのコントラスト4.5:1以上） */
  --color-accent-hover: #8f4525;

  /* アクセント（下線・小見出し等）は苔の緑で温かく */
  --color-ajisai: #6f8157;
  --color-ajisai-deep: #4e5c3c;
  --color-emphasis: #6f8157;

  --color-text: #3f362b;
  --color-text-muted: #65594a;
  --color-heading: #6e4a2c;        /* 見出しは濃い木の色 */

  --color-bg: #f7f1e4;             /* 生成り（cream） */
  --color-bg-white: #fffdf8;       /* カード地 */
  --color-bg-section: #efe6d2;     /* 淡色帯（cream2） */

  --color-border: #d8c8a8;
  --color-border-light: #e0d3ba;

  --color-link: #4e5c3c;
  --color-link-hover: #6f8157;

  --color-footer-bg: #6e4a2c;
  --color-footer-text: #efe1d0;

  --color-news-bg: #4e5c3c;        /* News帯（濃い苔） */
  --color-news-text: #f1efe1;
  --color-news-date: #eef3e2;

  --color-doc-badge: #a8542f;

  --color-table-header: #5d6f47;   /* 白文字とのコントラスト4.5:1以上 */
  --color-table-border: #d8c8a8;
  --color-table-stripe: #f4ecdb;

  --color-note: #65594a;

  /* --- 装飾（オーバーレイ・パステル地。意匠レイヤーでテキストには使わない） --- */
  --color-scrim: rgba(46, 36, 26, 0.92);      /* ライトボックス地色 */
  --color-wood-dark-rgb: 110, 74, 44;         /* = --color-wood-dark #6e4a2c。rgb()でα可変に */
  --color-decor-cream: #ece0c8;
  --color-decor-moss: #e3ecd5;
  --color-decor-terra: #f3ddcf;

  /* --- Typography --- */
  --font-body:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    system-ui, -apple-system, sans-serif;
  /* 見出しは手書き調（Klee One）で温かみを出す。--font-serif も同値 */
  --font-heading:
    "Klee One", "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
    sans-serif;
  --font-round:
    "Zen Maru Gothic", "Hiragino Maru Gothic ProN", var(--font-body);
  --font-serif:
    "Klee One", "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
    sans-serif;

  --text-base: 1.0625rem;  /* 17px（高齢者可読性を優先） */
  --text-sm: 0.95rem;      /* 15.2px（日付・注記・表など二次情報） */
  --text-xs: 0.8rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-3xl: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);

  --leading-tight: 1.4;
  --leading-normal: 1.9;

  /* --- Spacing --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-section: clamp(3.2rem, 2.2rem + 3vw, 5.2rem);

  /* --- Layout --- */
  --width-container: 1120px;
  --padding-container: 1.25rem;

  /* --- Shadows（茶を抜いた墨系・弱め。フラットなカード言語に寄せる） --- */
  --shadow-sm: 0 2px 8px -3px rgba(63, 54, 43, 0.12);
  --shadow-md: 0 8px 22px -14px rgba(63, 54, 43, 0.22);
  --shadow-lg: 0 14px 32px -22px rgba(63, 54, 43, 0.28);

  /* --- Border Radius --- */
  --radius-sm: 6px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* --- Transitions（上品な減速カーブに統一。.reveal と同一曲線） --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-base: 280ms var(--ease-out);

  /* --- Breakpoints (参照用、メディアクエリでは直接値を使用) --- */
  /* Mobile-first: 768px (tablet), 1024px (desktop) */
}