/* ════════════════════════════════════════════════════════════
   freed.co.jp デザイントークン（_common/css/tokens.css）
   Sprint 1 / 実装日: 2026-05-09 / spec_revision: 3
   ════════════════════════════════════════════════════════════
   ★ ここを編集すると全ページに反映されます ★
   - 色を変えたい時：このファイルの該当変数を変更
   - フォントを変えたい時：このファイルの該当変数を変更
   - 各ページCSSは tokens.css の変数のみ参照すること
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── メインブランド配色（Living Newspaper） ── */
  --color-primary:       #E05020;   /* ★ ブランドカラー（オレンジ） */
  --color-primary-h:     #C44018;   /* ホバー時 */
  --color-primary-dim:   rgba(224, 80, 32, 0.12);
  --color-primary-bdr:   rgba(224, 80, 32, 0.30);

  --color-bg:            #FAF7F2;   /* ★ 背景色（クリーム） */
  --color-bg-2:          #F4EFE6;   /* セクション交互色 */
  --color-bg-3:          #FFFFFF;   /* カード白 */

  --color-text:          #1A1410;   /* 本文（墨） */
  --color-text-dim:      #5A5040;   /* サブテキスト */
  --color-text-mute:     #9A9080;   /* 弱テキスト */

  --color-rule:          rgba(26, 20, 16, 0.10);   /* 罫線 */
  --color-rule-strong:   rgba(26, 20, 16, 0.30);

  /* ── ラボ配色（フリードラボ専用） ── */
  --lab-primary:         #2E5BFF;   /* 学術ブルー */
  --lab-bg:              #0E1220;   /* 深紺 */
  --lab-bg-2:            #141A2E;
  --lab-text:            #EDF1FA;
  --lab-text-dim:        rgba(237, 241, 250, 0.62);

  /* ── 番組制作配色 ── */
  --prod-primary:        #111111;
  --prod-bg:             #FFFFFF;
  --prod-accent:         #E05020;

  /* ── Global Newsroom 配色（多言語トップ） ── */
  --global-primary:      #0F1B3D;   /* 深紺 */
  --global-primary-deep: #0B1428;   /* 最暗・深紺（Hero 上端／sticky 背景用） */
  --global-primary-mid:  #16264F;   /* 中間・深紺（カード背景／グラデ中点用） */
  --global-primary-light:#1F3470;   /* 明・深紺（CTA グラデ底用） */
  --global-secondary:    #00B7C2;   /* シアン */
  --global-secondary-h:  #00d2dd;   /* シアン hover variant（Sprint 7 rev1 追加） */
  --global-accent:       #E05020;   /* オレンジ */
  --global-text:         #EDF1FA;

  /* ── 状態色（エラー・警告等）（Sprint 7 rev1 追加） ── */
  --color-error:         #D93025;   /* エラー色（赤） */
  --color-error-bg:      #FEF2F0;   /* エラー背景色（薄ピンク） */

  /* ── 余白（rem は 16px 基準） ── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── フォント ── */
  --font-sans:  'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
  --font-mono:  'IBM Plex Mono', monospace;
  --font-en:    'Inter', sans-serif;
  --font-zh:    'Noto Sans SC', var(--font-sans);
  --font-ko:    'Noto Sans KR', var(--font-sans);

  /* ── フォントサイズ ── */
  --fs-xs:     0.75rem;     /* 12px */
  --fs-sm:     0.875rem;    /* 14px */
  --fs-base:   1rem;        /* 16px */
  --fs-lg:     1.125rem;    /* 18px */
  --fs-xl:     1.25rem;     /* 20px */
  --fs-h3:     1.5rem;      /* 24px */
  --fs-h2:     2rem;        /* 32px */
  --fs-h1:     3rem;        /* 48px */
  --fs-hero:   4rem;        /* 64px */

  /* ── 行間 ── */
  --lh-tight:  1.2;
  --lh-base:   1.75;
  --lh-loose:  2;

  /* ── ブレークポイント（メディアクエリ用・参考値） ── */
  --bp-mobile:   560px;
  --bp-tablet:   960px;
  --bp-desktop:  1280px;

  /* ── 影 ── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.12);

  /* ── 角丸 ── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  /* ── z-index ── */
  --z-base:    1;
  --z-header:  100;
  --z-tickbar: 90;
  --z-modal:   1000;
  --z-tooltip: 1100;

  /* ── トランジション ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ── サブブランド切替（body のクラスで適用） ── */

body.theme-lab {
  --color-primary: var(--lab-primary);
  --color-bg:      var(--lab-bg);
  --color-bg-2:    var(--lab-bg-2);
  --color-text:    var(--lab-text);
  --color-text-dim: var(--lab-text-dim);
}

body.theme-prod {
  --color-primary: var(--prod-primary);
  --color-bg:      var(--prod-bg);
  --color-text:    var(--prod-primary);
}

body.theme-global {
  --color-primary: var(--global-accent);
  --color-bg:      var(--global-primary);
  --color-text:    var(--global-text);
}