/* ============================================================
   theme.css — カラーテーマ定義
   ------------------------------------------------------------
   配色はこのファイルの変数に集約。色の変更はここだけで完結する。

   テーマ切り替え（html要素の data-theme 属性）:
     purple … 既定（省略時もこれ）
     ocean  … 青系
     forest … 緑系
     dark   … ダーク
   ============================================================ */

/* ---- 既定テーマ（紫 / Stellia ブランド） ---------------- */
:root,
:root[data-theme="purple"]{
  color-scheme: light;

  /* ---- ブランド（アクセント）色 ---- */
  --brand:#7c3aed;            /* 主アクセント */
  --brand-strong:#6d28d9;     /* 主アクセント濃いめ */
  --brand-soft:#8b5cf6;       /* 主アクセント明るめ */
  --brand-ink:#5b21b6;        /* ブランド文字色 */
  --brand-ink-strong:#4c1d95; /* ブランド文字色 濃いめ */

  /* ---- ブランド系の淡い面・枠 ---- */
  --brand-tint-1:#faf5ff;     /* 最も淡い面 */
  --brand-tint-2:#f5f3ff;     /* hover 面 */
  --brand-tint-3:#ede9fe;     /* active 面 */
  --brand-tint-4:#ddd6fe;     /* selected 面 / 枠 */
  --brand-border:#c4b5fd;     /* ブランド点線枠など */

  /* ---- テキスト ---- */
  --text:#24292f;
  --muted:#57606a;

  /* ---- 面・枠・影 ---- */
  --panel:#ffffff;            /* パネル地色 */
  --panel-translucent:rgba(255,255,255,.94);
  --surface:#ffffff;          /* 入力欄・エディター地色 */
  --soft:#f6f8fa;             /* やわらかい面（見出し帯など） */
  --border:#d0d7de;           /* 標準の枠線 */
  --border-strong:rgba(208,215,222,.95);
  --shadow:0 10px 24px rgba(15,23,42,.08);
  --shadow-pop:0 18px 42px rgba(15,23,42,.22);

  /* ---- 状態色 ---- */
  --danger:#cf222e;
  --danger-tint:#fff8f7;
  --danger-tint-2:#ffebe9;
  --danger-border:#ffd7d5;
  --warn:#9a6700;
  /* --warn-tint: Lint 警告行（.line-gutter div.warn）の背景。
     実際の値はテーマごとに themes.json 側で上書きされるため、ここは themes.json が
     読めない／読み込み前のフォールバック値。 */
  --warn-tint:#fef08a;
  --warn-border:#d29922;
  --warn-ink:#7d4e00;
  --ok:#1a7f37;
  --link:#0969da;

  /* ---- 上部バナー通知（SME.banner）の配色。error=赤/warn=橙/info=青。テーマごとに上書き可 ---- */
  --banner-error-bg:#dc2626;  --banner-error-border:#b91c1c;  --banner-error-fg:#fff;
  --banner-warn-bg:#f59e0b;   --banner-warn-border:#b45309;   --banner-warn-fg:#451a03;
  --banner-info-bg:#2563eb;   --banner-info-border:#1e40af;   --banner-info-fg:#fff;

  /* ---- テンプレ適用（F3）の既存/テンプレートの色分け。既存=青／テンプレ=テーマのアクセント ---- */
  --atpl-existing:#1f6feb;    --atpl-existing-bg:rgba(31,111,235,.07);   --atpl-existing-edge:rgba(31,111,235,.7);
  --atpl-template:var(--brand-ink); --atpl-template-bg:var(--brand-tint-1); --atpl-template-edge:var(--brand-border);

  /* ---- エディター / プレビュー専用 ---- */
  --gutter-bg:#f6f8fa;
  --gutter-fg:#8c959f;
  --code-bg:#0d1117;          /* コードブロック地色 */
  --code-fg:#f0f6fc;          /* コードブロック文字色 */
  --inline-code-bg:#f6f8fa;   /* インラインコード地色 */

  /* ---- アプリ背景（グラデーション） ---- */
  --app-bg:linear-gradient(135deg,#faf5ff,#eff6ff 45%,#f8fafc);

  /* ---- ボタン地色（グラデーション） ---- */
  --button-bg:linear-gradient(180deg,#fff,#faf5ff);
  --button-primary-bg:linear-gradient(135deg,var(--brand-soft),var(--brand));
  --button-primary-bg-hover:linear-gradient(135deg,var(--brand),var(--brand-strong));
}