/* =======================================================================
   PanelCoach — Focus theme
   Opt-in alternate palette that preserves the current "classic" theme
   untouched. Activated only when html[data-theme="focus"] is present.
   Light/dark still use the existing html.dark toggle.
   ======================================================================= */

html[data-theme="focus"] {
  --surface-0:      #F3F6F8;
  --surface-1:      #FFFFFF;
  --surface-2:      #EDF3F7;
  --surface-sunken: #E7EEF4;

  --border-subtle:  #D7E0E8;
  --border-strong:  #BECAD4;
  --border-focus:   #005EB8;

  --text-primary:   #1F2D3D;
  --text-secondary: #506273;
  --text-muted:     #6E8091;
  --text-disabled:  #97A5B3;

  --accent:           #005EB8;
  --accent-hover:     #004A94;
  --accent-active:    #003670;
  --accent-subtle-bg: rgba(0, 94, 184, 0.08);
  --accent-ring:      rgba(0, 94, 184, 0.22);

  --shadow-focus:     0 0 0 3px var(--accent-ring);
  --grad-primary:     linear-gradient(135deg, #005EB8, #004A94);
  --grad-primary-shadow:
    0 10px 20px rgba(0, 94, 184, 0.15),
    0 2px 0 rgba(0, 74, 148, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 54, 112, 0.24);
  --btn-primary-bg: var(--grad-primary);
  --btn-primary-shadow: var(--grad-primary-shadow);
  --btn-danger-bg: linear-gradient(180deg, #6E87A6, #587290);
  --btn-danger-shadow:
    0 10px 20px rgba(88, 114, 144, 0.15),
    0 2px 0 rgba(63, 84, 110, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(56, 73, 96, 0.22);
  --btn-surface-shadow:
    0 7px 14px rgba(15, 23, 42, 0.06),
    0 1px 0 rgba(190, 202, 212, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(190, 202, 212, 0.82);

  --focus-blue-50:    #EBF3FB;
  --focus-blue-100:   #D6E8F8;
  --focus-blue-200:   #B4D2EE;
  --focus-blue-400:   #4C93D6;
  --focus-accent-border: rgba(0, 94, 184, 0.22);
  --focus-nav-bg:      rgba(237, 243, 247, 0.92);
  --focus-nav-active:  rgba(0, 94, 184, 0.10);
  --focus-neutral-50: #F7FAFC;
  --focus-neutral-100:#EEF3F7;
  --focus-neutral-200:#D7E0E8;

  --cat-leadership:    #005EB8;
  --cat-clinical:      #196CB8;
  --cat-education:     #2D7CC4;
  --cat-communication: #3B86CC;
  --cat-values:        #4C93D6;
  --cat-service:       #5CA0DD;
  --cat-career:        #7E9DB8;

  --fw-star:  #005EB8;
  --fw-camp:  #2D7CC4;
  --fw-spies: #4C93D6;
  --fw-open:  #7E9DB8;

  --tier-red:     #005EB8;
  --tier-orange:  #196CB8;
  --tier-amber:   #2D7CC4;
  --tier-sky:     #3B86CC;
  --tier-blue:    #4C93D6;
  --tier-green:   #5CA0DD;
  --tier-purple:  #6FADE0;

  --ui-tone-red:     #005EB8;
  --ui-tone-orange:  #196CB8;
  --ui-tone-amber:   #2D7CC4;
  --ui-tone-green:   #3B86CC;
  --ui-tone-blue:    #4C93D6;
  --ui-tone-purple:  #5CA0DD;
  --ui-tone-teal:    #62A5DC;
  --ui-tone-indigo:  #6FADE0;
  --ui-tone-cyan:    #7BB6E5;
  --ui-tone-rose:    #8CC0EA;
  --ui-tone-gray:    #7E9DB8;
}

html.dark[data-theme="focus"] {
  --surface-0:      #0B1117;
  --surface-1:      #121A23;
  --surface-2:      #18222D;
  --surface-sunken: #0E151D;

  --border-subtle:  #263240;
  --border-strong:  #344252;
  --border-focus:   #4C93D6;

  --text-primary:   #EAF1F7;
  --text-secondary: #B8C4D0;
  --text-muted:     #8B99A8;
  --text-disabled:  #647383;

  --accent:           #4C93D6;
  --accent-hover:     #6FADE0;
  --accent-active:    #3B82C9;
  --accent-subtle-bg: rgba(76, 147, 214, 0.14);
  --accent-ring:      rgba(76, 147, 214, 0.32);

  --shadow-focus:     0 0 0 3px var(--accent-ring);
  --grad-primary:     linear-gradient(135deg, #4C93D6, #3B82C9);
  --grad-primary-shadow:
    0 10px 20px rgba(76, 147, 214, 0.20),
    0 2px 0 rgba(11, 17, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(11, 17, 23, 0.40);
  --btn-primary-bg: var(--grad-primary);
  --btn-primary-shadow: var(--grad-primary-shadow);
  --btn-danger-bg: linear-gradient(180deg, #607A96, #4C657F);
  --btn-danger-shadow:
    0 10px 20px rgba(76, 101, 127, 0.18),
    0 2px 0 rgba(11, 17, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(11, 17, 23, 0.38);
  --btn-surface-shadow:
    0 8px 16px rgba(0, 0, 0, 0.20),
    0 1px 0 rgba(11, 17, 23, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38);

  --focus-blue-50:    #172330;
  --focus-blue-100:   #1D2D3D;
  --focus-blue-200:   #28435C;
  --focus-blue-400:   #6FADE0;
  --focus-accent-border: rgba(76, 147, 214, 0.32);
  --focus-nav-bg:      rgba(24, 34, 45, 0.92);
  --focus-nav-active:  rgba(76, 147, 214, 0.16);
  --focus-neutral-50: #121A23;
  --focus-neutral-100:#18222D;
  --focus-neutral-200:#263240;

  --cat-leadership:    #6FADE0;
  --cat-clinical:      #62A5DC;
  --cat-education:     #579DD8;
  --cat-communication: #4C93D6;
  --cat-values:        #7BB6E5;
  --cat-service:       #8CC0EA;
  --cat-career:        #9DB4C8;

  --fw-star:  #6FADE0;
  --fw-camp:  #62A5DC;
  --fw-spies: #4C93D6;
  --fw-open:  #9DB4C8;

  --tier-red:     #6FADE0;
  --tier-orange:  #62A5DC;
  --tier-amber:   #579DD8;
  --tier-sky:     #4C93D6;
  --tier-blue:    #7BB6E5;
  --tier-green:   #8CC0EA;
  --tier-purple:  #9CC9EE;

  --ui-tone-red:     #6FADE0;
  --ui-tone-orange:  #62A5DC;
  --ui-tone-amber:   #579DD8;
  --ui-tone-green:   #4C93D6;
  --ui-tone-blue:    #7BB6E5;
  --ui-tone-purple:  #8CC0EA;
  --ui-tone-teal:    #7BB6E5;
  --ui-tone-indigo:  #8CC0EA;
  --ui-tone-cyan:    #9CC9EE;
  --ui-tone-rose:    #B0D2F0;
  --ui-tone-gray:    #9DB4C8;
}

html[data-theme="focus"] body {
  background: var(--surface-0) !important;
  color: var(--text-primary);
}

html[data-theme="focus"] .pc-section--guidance {
  --section-color: var(--ui-tone-green);
  --section-bg: color-mix(in srgb, var(--ui-tone-green) 12%, transparent);
}

html[data-theme="focus"] .pc-section--tips {
  --section-color: var(--ui-tone-orange);
  --section-bg: color-mix(in srgb, var(--ui-tone-orange) 12%, transparent);
}

html[data-theme="focus"] .pc-section--info {
  --section-color: var(--ui-tone-blue);
  --section-bg: color-mix(in srgb, var(--ui-tone-blue) 12%, transparent);
}

html[data-theme="focus"] .pc-btn--primary,
html[data-theme="focus"] .pc-btn--nhs {
  box-shadow: var(--btn-primary-shadow);
}

html[data-theme="focus"] .pc-framework-chip,
html[data-theme="focus"] .bank-tier-btn,
html[data-theme="focus"] .bank-details__summary {
  box-shadow: var(--btn-surface-shadow);
}

html[data-theme="focus"] .pc-framework-chip--active[data-framework] {
  box-shadow: var(--btn-primary-shadow);
}

html[data-theme="focus"] [style*="background:#fff"],
html[data-theme="focus"] [style*="background:#ffffff"],
html[data-theme="focus"] [style*="background:#151b23"] {
  background: var(--surface-1) !important;
}

html[data-theme="focus"] [style*="background:#f9fafb"],
html[data-theme="focus"] [style*="background:#f3f4f6"],
html[data-theme="focus"] [style*="background:#0d1117"],
html[data-theme="focus"] [style*="background:#161b22"] {
  background: var(--surface-2) !important;
}

html[data-theme="focus"] [style*="background:rgba(243,244,246,0.7)"],
html[data-theme="focus"] [style*="background:rgba(13,17,23,0.85)"],
html[data-theme="focus"] [style*="background:rgba(243,244,246,0.85)"] {
  background: var(--focus-nav-bg) !important;
}

html[data-theme="focus"] [style*="border:1px solid #e5e7eb"],
html[data-theme="focus"] [style*="border:1px solid #21262d"],
html[data-theme="focus"] [style*="border-color:#e5e7eb"],
html[data-theme="focus"] [style*="border-color:#21262d"],
html[data-theme="focus"] [style*="border-color:#30363d"] {
  border-color: var(--border-subtle) !important;
}

html[data-theme="focus"] [style*="color:#1f2937"],
html[data-theme="focus"] [style*="color:#374151"],
html[data-theme="focus"] [style*="color:#e5e7eb"],
html[data-theme="focus"] [style*="color:#c9d1d9"],
html[data-theme="focus"] [style*="color:#d1d5db"],
html[data-theme="focus"] [style*="color:#212B32"] {
  color: var(--text-primary) !important;
}

html[data-theme="focus"] [style*="color:#6b7280"],
html[data-theme="focus"] [style*="color:#9ca3af"],
html[data-theme="focus"] [style*="color:#64748b"],
html[data-theme="focus"] [style*="color:#4C6272"],
html[data-theme="focus"] [style*="color:#8A94A8"] {
  color: var(--text-muted) !important;
}

html[data-theme="focus"] [style*="color:#7c3aed"],
html[data-theme="focus"] [style*="color:#7B61FF"],
html[data-theme="focus"] [style*="color:#c4b5fd"],
html[data-theme="focus"] [style*="color:#a855f7"],
html[data-theme="focus"] [style*="color:#a78bfa"],
html[data-theme="focus"] [style*="color:#E85C8A"],
html[data-theme="focus"] [style*="color:#F0884A"],
html[data-theme="focus"] [style*="color:#34C48B"],
html[data-theme="focus"] [style*="color:#93c5fd"],
html[data-theme="focus"] [style*="color:#bfdbfe"] {
  color: var(--accent) !important;
}

html[data-theme="focus"] [style*="rgba(124,58,237,0.2)"],
html[data-theme="focus"] [style*="rgba(139,92,246,0.4)"],
html[data-theme="focus"] [style*="rgba(123,97,255,0.15)"],
html[data-theme="focus"] [style*="rgba(123,97,255,0.3)"] {
  border-color: var(--focus-accent-border) !important;
}

html[data-theme="focus"] [style*="rgba(123,97,255,0.08)"],
html[data-theme="focus"] [style*="rgba(123,97,255,0.15)"],
html[data-theme="focus"] [style*="rgba(232,92,138,0.08)"],
html[data-theme="focus"] [style*="rgba(240,136,74,0.08)"],
html[data-theme="focus"] [style*="rgba(52,196,139,0.08)"],
html[data-theme="focus"] [style*="rgba(138,148,168,0.08)"],
html[data-theme="focus"] [style*="rgba(52,196,139,0.15)"],
html[data-theme="focus"] [style*="rgba(138,148,168,0.15)"],
html[data-theme="focus"] [style*="rgba(100,116,139,0.1)"],
html[data-theme="focus"] [style*="rgba(15,118,110,0.1)"] {
  background: var(--focus-blue-50) !important;
}

html[data-theme="focus"] [style*="rgba(232,92,138,0.2)"],
html[data-theme="focus"] [style*="rgba(240,136,74,0.2)"],
html[data-theme="focus"] [style*="rgba(52,196,139,0.2)"],
html[data-theme="focus"] [style*="rgba(138,148,168,0.2)"],
html[data-theme="focus"] [style*="rgba(232,92,138,0.25)"],
html[data-theme="focus"] [style*="rgba(240,136,74,0.25)"],
html[data-theme="focus"] [style*="rgba(52,196,139,0.25)"] {
  border-color: var(--focus-blue-200) !important;
}

html[data-theme="focus"] [style*="background:#fff7ed"],
html[data-theme="focus"] [style*="background:#f0fdfa"],
html[data-theme="focus"] [style*="background:#f9fafb"],
html[data-theme="focus"] [style*="background:#fffbeb"],
html[data-theme="focus"] [style*="background:#f8fafc"],
html[data-theme="focus"] [style*="background:#ecfeff"] {
  background: var(--focus-blue-50) !important;
}

html[data-theme="focus"] [style*="background:#fed7aa"],
html[data-theme="focus"] [style*="background:#ccfbf1"],
html[data-theme="focus"] [style*="background:#fde68a"],
html[data-theme="focus"] [style*="background:#e5e7eb"],
html[data-theme="focus"] [style*="background:#f3f4f6"] {
  background: var(--focus-blue-100) !important;
}

html[data-theme="focus"] [style*="color:#c2410c"],
html[data-theme="focus"] [style*="color:#0f766e"],
html[data-theme="focus"] [style*="color:#5eead4"],
html[data-theme="focus"] [style*="color:#64748b"],
html[data-theme="focus"] [style*="color:#4b5563"],
html[data-theme="focus"] [style*="color:#FF5A5A"] {
  color: var(--accent) !important;
}

html[data-theme="focus"] [style*="background:#ef4444"],
html[data-theme="focus"] [style*="background:#f87171"],
html[data-theme="focus"] [style*="background:#fca5a5"] {
  background: var(--btn-danger-bg) !important;
  color: var(--btn-danger-text) !important;
  box-shadow: var(--btn-danger-shadow) !important;
}

html[data-theme="focus"] [style*="linear-gradient(135deg,#3b82f6,#60a5fa)"],
html[data-theme="focus"] [style*="linear-gradient(135deg,#2563eb,#7B61FF)"] {
  background: var(--grad-primary) !important;
  box-shadow: var(--grad-primary-shadow) !important;
}

html[data-theme="focus"] [style*="background:rgba(255,255,255,0.85);color:#7c3aed"],
html[data-theme="focus"] [style*="background:rgba(255,255,255,0.1);color:#c4b5fd"] {
  background: var(--focus-nav-active) !important;
}

html[data-theme="focus"] .border-red-400 { border-color: var(--ui-tone-red) !important; }
html[data-theme="focus"] .border-orange-400 { border-color: var(--ui-tone-orange) !important; }
html[data-theme="focus"] .border-amber-400 { border-color: var(--ui-tone-amber) !important; }
html[data-theme="focus"] .border-green-400 { border-color: var(--ui-tone-green) !important; }
html[data-theme="focus"] .border-blue-400 { border-color: var(--ui-tone-blue) !important; }
html[data-theme="focus"] .border-purple-400,
html[data-theme="focus"] .border-pink-400 { border-color: var(--ui-tone-purple) !important; }
html[data-theme="focus"] .border-teal-400 { border-color: var(--ui-tone-teal) !important; }
html[data-theme="focus"] .border-indigo-400 { border-color: var(--ui-tone-indigo) !important; }
html[data-theme="focus"] .border-cyan-400 { border-color: var(--ui-tone-cyan) !important; }
html[data-theme="focus"] .border-rose-400 { border-color: var(--ui-tone-rose) !important; }
html[data-theme="focus"] .border-gray-400 { border-color: var(--ui-tone-gray) !important; }

html[data-theme="focus"] .text-purple-500,
html[data-theme="focus"] .text-purple-600,
html[data-theme="focus"] .text-purple-700,
html[data-theme="focus"] .text-purple-800,
html[data-theme="focus"] .text-purple-900,
html[data-theme="focus"] .text-violet-400,
html[data-theme="focus"] .text-violet-500,
html[data-theme="focus"] .text-violet-600,
html[data-theme="focus"] .text-violet-700,
html[data-theme="focus"] .text-violet-800,
html[data-theme="focus"] .text-indigo-500,
html[data-theme="focus"] .text-indigo-700,
html[data-theme="focus"] .text-indigo-900,
html[data-theme="focus"] .text-teal-500,
html[data-theme="focus"] .text-teal-600,
html[data-theme="focus"] .text-teal-700,
html[data-theme="focus"] .text-teal-800,
html[data-theme="focus"] .text-teal-900,
html[data-theme="focus"] .text-blue-700,
html[data-theme="focus"] .text-blue-800 {
  color: var(--accent) !important;
}

html[data-theme="focus"] .text-red-700 { color: var(--ui-tone-red) !important; }
html[data-theme="focus"] .text-red-600,
html[data-theme="focus"] .text-red-500,
html[data-theme="focus"] .text-red-400 { color: var(--accent) !important; }
html[data-theme="focus"] .text-orange-700 { color: var(--ui-tone-orange) !important; }
html[data-theme="focus"] .text-amber-700 { color: var(--ui-tone-amber) !important; }
html[data-theme="focus"] .text-green-700 { color: var(--ui-tone-green) !important; }
html[data-theme="focus"] .text-gray-700,
html[data-theme="focus"] .text-gray-800 { color: var(--ui-tone-gray) !important; }

html[data-theme="focus"] .bg-purple-50,
html[data-theme="focus"] .bg-violet-50,
html[data-theme="focus"] .bg-indigo-50,
html[data-theme="focus"] .bg-teal-50,
html[data-theme="focus"] .bg-blue-50,
html[data-theme="focus"] .bg-sky-50,
html[data-theme="focus"] .bg-red-50,
html[data-theme="focus"] .bg-orange-50,
html[data-theme="focus"] .bg-amber-50,
html[data-theme="focus"] .bg-green-50,
html[data-theme="focus"] .bg-gray-50 {
  background-color: var(--focus-blue-50) !important;
}

html[data-theme="focus"] .bg-purple-100,
html[data-theme="focus"] .bg-violet-100,
html[data-theme="focus"] .bg-indigo-100,
html[data-theme="focus"] .bg-teal-100,
html[data-theme="focus"] .bg-blue-100,
html[data-theme="focus"] .bg-gray-100,
html[data-theme="focus"] .bg-amber-100,
html[data-theme="focus"] .bg-red-100 {
  background-color: var(--focus-blue-100) !important;
}

html[data-theme="focus"] .bg-purple-200,
html[data-theme="focus"] .bg-blue-200,
html[data-theme="focus"] .bg-red-200 {
  background-color: var(--focus-blue-200) !important;
}

html[data-theme="focus"] .bg-purple-500,
html[data-theme="focus"] .bg-purple-600,
html[data-theme="focus"] .bg-violet-500,
html[data-theme="focus"] .bg-indigo-500,
html[data-theme="focus"] .bg-blue-500,
html[data-theme="focus"] .bg-blue-600,
html[data-theme="focus"] .bg-teal-500 {
  background-color: var(--accent) !important;
}

html[data-theme="focus"] .bg-red-400,
html[data-theme="focus"] .bg-red-500 { background-color: var(--ui-tone-red) !important; }
html[data-theme="focus"] .bg-orange-400,
html[data-theme="focus"] .bg-orange-500 { background-color: var(--ui-tone-orange) !important; }
html[data-theme="focus"] .bg-amber-400,
html[data-theme="focus"] .bg-amber-500 { background-color: var(--ui-tone-amber) !important; }
html[data-theme="focus"] .bg-green-400,
html[data-theme="focus"] .bg-green-500 { background-color: var(--ui-tone-green) !important; }
html[data-theme="focus"] .bg-blue-400 { background-color: var(--ui-tone-blue) !important; }
html[data-theme="focus"] .bg-purple-400 { background-color: var(--ui-tone-purple) !important; }
html[data-theme="focus"] .bg-teal-400 { background-color: var(--ui-tone-teal) !important; }
html[data-theme="focus"] .bg-indigo-400 { background-color: var(--ui-tone-indigo) !important; }
html[data-theme="focus"] .bg-cyan-400 { background-color: var(--ui-tone-cyan) !important; }
html[data-theme="focus"] .bg-rose-400 { background-color: var(--ui-tone-rose) !important; }
html[data-theme="focus"] .bg-gray-500 { background-color: var(--ui-tone-gray) !important; }

html[data-theme="focus"] .border-purple-200,
html[data-theme="focus"] .border-purple-600,
html[data-theme="focus"] .border-violet-200,
html[data-theme="focus"] .border-indigo-200,
html[data-theme="focus"] .border-teal-200,
html[data-theme="focus"] .border-blue-200,
html[data-theme="focus"] .border-violet-400,
html[data-theme="focus"] .border-red-200 {
  border-color: var(--focus-blue-200) !important;
}

html[data-theme="focus"] .hover\:bg-purple-50:hover,
html[data-theme="focus"] .hover\:bg-purple-100:hover,
html[data-theme="focus"] .hover\:bg-purple-200:hover,
html[data-theme="focus"] .hover\:bg-red-100:hover,
html[data-theme="focus"] .hover\:bg-red-200:hover,
html[data-theme="focus"] .hover\:text-purple-700:hover {
  background-color: var(--focus-blue-50) !important;
  color: var(--accent) !important;
}

html[data-theme="focus"] .from-violet-50,
html[data-theme="focus"] .to-purple-50,
html[data-theme="focus"] .from-teal-50,
html[data-theme="focus"] .to-cyan-50 {
  --tw-gradient-from: var(--focus-blue-50) !important;
  --tw-gradient-to: var(--focus-blue-100) !important;
}

html[data-theme="focus"] .ring-purple-500 {
  --tw-ring-color: var(--accent) !important;
}

html[data-theme="focus"] .placeholder-gray-400::placeholder {
  color: var(--text-muted) !important;
}