/**
 * UXCentra Playground — 共通テーマ
 *
 * サイト本体 (globals.scss) と同じカラートークンを提供する。
 * 各デモはこの CSS を読み込むだけでライト/ダーク両対応になる。
 *
 * 使い方:
 *   <link rel="stylesheet" href="../common/css/theme.css">
 *   <script src="../common/js/theme-sync.js"></script>
 */

/* ============================================
   1. ベーステーマ（ライトモード）
   ============================================ */
:root,
[data-theme="light"] {
  /* --- 背景 --- */
  --pg-bg:              #f1f5f9;
  --pg-bg-secondary:    #e2e8f0;
  --pg-bg-tertiary:     #eaeff5;

  /* --- パネル / カード --- */
  --pg-panel:           #ffffff;
  --pg-panel-hover:     #f8fafc;

  /* --- テキスト --- */
  --pg-text:            #1e293b;   /* 13.35:1 on bg  — AAA */
  --pg-text-secondary:  #334155;   /* 8.1:1  on bg   — AAA */
  --pg-text-muted:      #64748b;   /* 4.63:1 on bg   — AA  */

  /* --- アクセント --- */
  --pg-accent:          #0a5550;
  --pg-accent-hover:    #115e59;
  --pg-on-accent:       #ffffff;

  /* --- ボーダー / ライン --- */
  --pg-border:          #cbd5e1;
  --pg-line:            #e2e8f0;

  /* --- シャドウ --- */
  --pg-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pg-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* --- セマンティック --- */
  --pg-success:   #10b981;
  --pg-warning:   #f59e0b;
  --pg-error:     #ef4444;
  --pg-info:      #334155;

  /* --- キーカラーパレット（データ可視化やアクセント用途） --- */
  --pg-key-teal:    #0a5550;
  --pg-key-blue:    #2563eb;
  --pg-key-indigo:  #4f46e5;
  --pg-key-purple:  #7c3aed;
  --pg-key-pink:    #ec4899;
  --pg-key-orange:  #ea580c;
  --pg-key-amber:   #d97706;
  --pg-key-green:   #16a34a;
  --pg-key-cyan:    #0891b2;
  --pg-key-red:     #dc2626;

  /* --- トランジション --- */
  --pg-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --pg-dur-fast:  150ms;
  --pg-dur-base:  200ms;
  --pg-dur-slow:  300ms;

  color-scheme: light;
}

/* ============================================
   2. ダークモード
   ============================================ */
[data-theme="dark"] {
  --pg-bg:              #18181b;
  --pg-bg-secondary:    #27272a;
  --pg-bg-tertiary:     #202023;

  --pg-panel:           #27272a;
  --pg-panel-hover:     #2e2e32;

  --pg-text:            #fafafa;   /* 16.97:1 on bg — AAA */
  --pg-text-secondary:  #bababf;   /* 8.7:1  on bg  — AAA */
  --pg-text-muted:      #71717a;   /* 4.1:1  on bg  — AA  */

  --pg-accent:          #22cab5;
  --pg-accent-hover:    #2dd4bf;
  --pg-on-accent:       #111111;

  --pg-border:          #3f3f46;
  --pg-line:            #3f3f46;

  --pg-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.3);
  --pg-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);

  --pg-success:   #34d399;
  --pg-warning:   #fbbf24;
  --pg-error:     #f87171;
  --pg-info:      #94a3b8;

  --pg-key-teal:    #2dd4bf;
  --pg-key-blue:    #60a5fa;
  --pg-key-indigo:  #818cf8;
  --pg-key-purple:  #a78bfa;
  --pg-key-pink:    #f472b6;
  --pg-key-orange:  #fb923c;
  --pg-key-amber:   #fbbf24;
  --pg-key-green:   #4ade80;
  --pg-key-cyan:    #22d3ee;
  --pg-key-red:     #f87171;

  color-scheme: dark;
}

/* システム設定フォールバック */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pg-bg:              #18181b;
    --pg-bg-secondary:    #27272a;
    --pg-bg-tertiary:     #202023;
    --pg-panel:           #27272a;
    --pg-panel-hover:     #2e2e32;
    --pg-text:            #fafafa;
    --pg-text-secondary:  #bababf;
    --pg-text-muted:      #71717a;
    --pg-accent:          #22cab5;
    --pg-accent-hover:    #2dd4bf;
    --pg-on-accent:       #111111;
    --pg-border:          #3f3f46;
    --pg-line:            #3f3f46;
    --pg-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.3);
    --pg-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --pg-success:   #34d399;
    --pg-warning:   #fbbf24;
    --pg-error:     #f87171;
    --pg-info:      #94a3b8;
    --pg-key-teal:    #2dd4bf;
    --pg-key-blue:    #60a5fa;
    --pg-key-indigo:  #818cf8;
    --pg-key-purple:  #a78bfa;
    --pg-key-pink:    #f472b6;
    --pg-key-orange:  #fb923c;
    --pg-key-amber:   #fbbf24;
    --pg-key-green:   #4ade80;
    --pg-key-cyan:    #22d3ee;
    --pg-key-red:     #f87171;
    color-scheme: dark;
  }
}

/* ============================================
   3. ベースリセット & タイポグラフィ
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background: var(--pg-bg);
  color: var(--pg-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 見出し --- */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  font-weight: 700;
  color: var(--pg-text);
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

h2 {
  font-size: 1.375rem;
  margin-bottom: 0.625rem;
}

h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

/* --- 段落・テキスト --- */
p {
  margin-bottom: 0.75rem;
  color: var(--pg-text-secondary);
}

small {
  font-size: 0.8125rem;
  color: var(--pg-text-muted);
}

/* --- セクションタイトル（ラベル風） --- */
.pg-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

/* --- リンク --- */
a {
  color: var(--pg-accent);
  text-decoration: none;
  transition: color var(--pg-dur-fast) var(--pg-ease);
}

a:hover {
  color: var(--pg-accent-hover);
}

/* --- パネル / カード --- */
.pg-panel {
  background: var(--pg-panel);
  border: 1px solid var(--pg-border);
  border-radius: 12px;
  padding: 1rem;
}

/* --- 区切り線 --- */
hr {
  border: none;
  border-top: 1px solid var(--pg-line);
  margin: 1rem 0;
}

/* --- ボタン --- */
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--pg-dur-fast) var(--pg-ease);
  user-select: none;
}

.pg-btn-primary {
  background: var(--pg-accent);
  color: var(--pg-on-accent);
}

.pg-btn-primary:hover {
  background: var(--pg-accent-hover);
}

.pg-btn-secondary {
  background: var(--pg-bg-secondary);
  color: var(--pg-text);
  border: 1px solid var(--pg-border);
}

.pg-btn-secondary:hover {
  background: var(--pg-bg-tertiary);
}

/* --- フォーカスリング --- */
:focus-visible {
  outline: 3px solid var(--pg-accent);
  outline-offset: 2px;
}

/* --- コード --- */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--pg-bg-secondary);
  padding: 0.125em 0.375em;
  border-radius: 4px;
}