/* ==========================================================================
   brand-color.css — SEO PRO Brand Color Production Override
   --------------------------------------------------------------------------
   目的:
     承認済み Leadspace Brand Runtime v1 / Color-only Proposal v2.1 の確定色を、
     SEO PRO 本番へ反映する Production 用 override。
     build.css（自動生成物）を再生成せず、その「後」に読み込んで utility の
     「色だけ」を後勝ちで差し替える（既存 legacy-content.css / animations.css と同一方式）。

   正本:
     - docs/discovery/leadspace-brand-runtime-v1.md
     - docs/discovery/seopro-leadspace-color-only-visual-proposal-v2-1.md
     - docs/discovery/proposal/seopro-leadspace-color-only-v2-1/leadspace-color-override-v2-1.css
     - docs/discovery/seopro-brand-color-production-implementation-design-gate-v1.md（Color Role Migration Map）

   運用:
     - 本ファイルは inc/enqueue.php で build.css / animations.css の「後」に enqueue する。
     - tailwind.config.js の content は *.php のみ → 本ファイルは build.css へ混入しない（purge 対象外）。
     - Tailwind の rgb(… / var(--tw-*-opacity)) 記法を踏襲し opacity utility を壊さない。
     - 機械的一括置換をしない。navy は「構造インク/Dark Surface/二次CTA/装飾」のみ charcoal 化し、
       focus / ring / 状態色（意味ブルー・error）は温存する。

   確定色（Yu Decision）:
     Primary Red #F83838 / Primary Hover #E23434 / Primary Soft #FFF2F2
     Charcoal #313131 / Charcoal Deep #232323 / Charcoal Hover #454545
     Section #F7F3F0 / Base #F5F5F4 / Border #E4E0DB / Card Shadow 温中立
     Meaning Blue / focus / error = 温存
   ========================================================================== */

/* ==========================================================================
   [A] Primary Brand Red = #F83838（正本 / hover #E23434）
   ========================================================================== */
.bg-primary {
  background-color: rgb(248 56 56 / var(--tw-bg-opacity, 1));   /* #F83838 */
}
.text-primary {
  color: rgb(248 56 56 / var(--tw-text-opacity, 1));            /* #F83838（アイコンは currentColor で追従） */
}
.bg-primary-hover,
.hover\:bg-primary-hover:hover {
  background-color: rgb(226 52 52 / var(--tw-bg-opacity, 1));   /* #E23434 */
}
.border-primary {
  border-color: rgb(248 56 56 / var(--tw-border-opacity, 1));   /* #F83838 */
}
.bg-primary-soft {
  background-color: rgb(255 242 242 / var(--tw-bg-opacity, 1)); /* #FFF2F2 */
}
.shadow-cta {
  --tw-shadow: 0 6px 16px rgba(248, 56, 56, .20);
  --tw-shadow-colored: 0 6px 16px var(--tw-shadow-color);
}
.shadow-cta-hover {
  --tw-shadow: 0 10px 24px rgba(248, 56, 56, .30);
  --tw-shadow-colored: 0 10px 24px var(--tw-shadow-color);
}

/* ==========================================================================
   [B] 構造役割 navy → ニュートラルチャコール
   #313131 基本 / #232323 deep(Dark Surface) / #454545 hover
   ========================================================================== */
.text-navy {
  color: rgb(49 49 49 / var(--tw-text-opacity, 1));            /* #313131 見出し・構造インク・数値面 */
}
.bg-navy,
.hover\:bg-navy:hover {
  background-color: rgb(49 49 49 / var(--tw-bg-opacity, 1));   /* #313131 Dark面/数値バッジ/アイコン背景/二次塗り */
}
.bg-\[\#0d2b4e\] {
  background-color: #313131;                                    /* arbitrary navy（二次CTA/バッジ） */
}
.bg-navy-deep,
.hover\:bg-navy-deep:hover {
  background-color: rgb(35 35 35 / var(--tw-bg-opacity, 1));   /* #232323 Footer 等 Dark Surface */
}
.bg-navy-hover,
.hover\:bg-navy-hover:hover {
  background-color: rgb(69 69 69 / var(--tw-bg-opacity, 1));   /* #454545 navy系ボタン hover */
}
.border-navy {
  border-color: rgb(49 49 49 / var(--tw-border-opacity, 1));   /* #313131 二次CTA枠・装飾線（focus:border-navy は非対象） */
}
/* Hero 装飾リング：navy(1,4)→charcoal / orange(2,5)→Brand赤 / mesh→charcoal
   （animations.css の @media 再定義に勝つため !important） */
.hero-ring-1,
.hero-ring-4 { border-color: rgba(49, 49, 49, .16) !important; }
.hero-ring-2,
.hero-ring-5 { border-color: rgba(248, 56, 56, .10) !important; }
.hero-mesh   { background-image: radial-gradient(rgba(49,49,49,.10) 1px, transparent 1px) !important; }

/* ==========================================================================
   [C] 意味色（Meaning Blue / 状態色）は温存 ＝ ここで override しない
   --------------------------------------------------------------------------
   .focus\:border-navy:focus / .focus\:ring-navy\/20:focus /
   .focus-visible\:ring-navy / .focus-visible\:ring-offset-navy /
   既定 focus ring rgba(59,130,246,.5) / .text-red-600 / .is-error
   → navy/blue/red の意味色のまま。本ファイルに対応 selector を書かない。
   未使用 blue トークンのみ将来の意味ブルーとして Leadspace accent に整列（描画影響0）。
   ========================================================================== */
.text-blue {
  color: rgb(47 74 227 / var(--tw-text-opacity, 1));           /* Leadspace --c-accent #2F4AE3（現行 PHP 使用0） */
}

/* ==========================================================================
   [D] 温中立（寒色支配の是正）
   ========================================================================== */
.bg-navy-soft,
.hover\:bg-navy-soft:hover {
  background-color: rgb(247 243 240 / var(--tw-bg-opacity, 1)); /* #F7F3F0 Section */
}
.from-navy-soft {
  --tw-gradient-from: #f7f3f0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(247, 243, 240, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.bg-bg {
  background-color: rgb(245 245 244 / var(--tw-bg-opacity, 1)); /* #F5F5F4 Base */
}
.via-bg {
  --tw-gradient-to: rgba(245, 245, 244, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f5f5f4 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.border-line {
  border-color: rgb(228 224 219 / var(--tw-border-opacity, 1)); /* #E4E0DB Border */
}
.shadow-card {
  --tw-shadow: 0 4px 12px rgba(30, 25, 20, .07);               /* 温中立影 */
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
}
.shadow-card-hover {
  --tw-shadow: 0 12px 28px rgba(30, 25, 20, .13);
  --tw-shadow-colored: 0 12px 28px var(--tw-shadow-color);
}