/*
 * TC-SLP brand color contract.
 *
 * Load this file after page-level styles. It intentionally changes color only:
 * spacing, typography, sizing and layout remain owned by each product surface.
 */

:root {
  /* Canonical brand tokens */
  --tc-color-primary: #0D9488;
  --tc-color-primary-strong: #0F766E;
  --tc-color-primary-soft: #CCFBF1;
  --tc-color-primary-subtle: #F0FDFA;

  --tc-color-secondary: #1A2332;
  --tc-color-secondary-strong: #111827;
  --tc-color-secondary-soft: #E7ECF0;
  --tc-color-secondary-subtle: #F1F4F6;

  --tc-color-accent: #F97316;
  --tc-color-accent-strong: #C2410C;
  --tc-color-accent-soft: #FFEDD5;
  --tc-color-accent-subtle: #FFF7ED;

  --tc-color-background: #FAFBFC;
  --tc-color-surface: #FFFFFF;
  --tc-color-text: #1A2332;
  --tc-color-muted: #4A5568;
  --tc-color-border: #C9D2CF;
  --tc-color-border-strong: #7F918C;

  --tc-color-success: #277A55;
  --tc-color-success-strong: #1C6343;
  --tc-color-success-soft: #E5F2EB;
  --tc-color-warning: #8A5A00;
  --tc-color-warning-strong: #6F4700;
  --tc-color-warning-soft: #F7EEDC;
  --tc-color-danger: #B23A3A;
  --tc-color-danger-strong: #912E2E;
  --tc-color-danger-soft: #F7E7E7;
  --tc-color-focus: #006B8F;
  --tc-color-focus-soft: #DCEFF7;

  --tc-color-on-primary: #FFFFFF;
  --tc-color-on-secondary: #FFFFFF;
  --tc-color-on-accent: #FFFFFF;
  --tc-color-on-success: #FFFFFF;
  --tc-color-on-warning: #FFFFFF;
  --tc-color-on-danger: #FFFFFF;

  /* Shared --brand-* compatibility */
  --brand-primary: #0D9488;
  --brand-primary-dark: var(--tc-color-primary-strong);
  --brand-primary-light: var(--tc-color-primary-soft);
  --brand-secondary: #1A2332;
  --brand-secondary-dark: var(--tc-color-secondary-strong);
  --brand-secondary-light: var(--tc-color-secondary-soft);
  --brand-accent: #F97316;
  --brand-accent-dark: var(--tc-color-accent-strong);
  --brand-accent-light: var(--tc-color-accent-soft);
  --brand: #0D9488;
  --brand-strong: var(--tc-color-primary-strong);
  --brand-soft: var(--tc-color-primary-soft);

  /* Generic compatibility used by legacy single-file tools */
  --primary: #0D9488;
  --primary-dark: var(--tc-color-primary-strong);
  --primary-deep: var(--tc-color-primary-strong);
  --primary-light: var(--tc-color-primary-soft);
  --primary-soft: var(--tc-color-primary-soft);
  --primary-foreground: #FFFFFF;
  --secondary: #1A2332;
  --secondary-dark: var(--tc-color-secondary-strong);
  --secondary-soft: var(--tc-color-secondary-soft);
  --secondary-foreground: #FFFFFF;
  --accent: #F97316;
  --accent-dark: var(--tc-color-accent-strong);
  --accent-soft: var(--tc-color-accent-soft);
  --accent-foreground: #FFFFFF;
  --background: #FAFBFC;
  --surface: #FFFFFF;
  --panel-bg: #FFFFFF;
  --card-bg: #FFFFFF;
  --text-primary: #1A2332;
  --text-secondary: #4A5568;
  --text-tertiary: #4A5568;
  --text-muted: #4A5568;
  --bg-page: #FAFBFC;
  --bg-surface: #FFFFFF;
  --bg-surface-hover: var(--tc-color-primary-subtle);
  --border-default: #C9D2CF;
  --border-strong: #7F918C;
  --success: #277A55;
  --success-dark: var(--tc-color-success-strong);
  --success-soft: var(--tc-color-success-soft);
  --warning: #8A5A00;
  --warning-dark: var(--tc-color-warning-strong);
  --warning-soft: var(--tc-color-warning-soft);
  --danger: #B23A3A;
  --danger-dark: var(--tc-color-danger-strong);
  --danger-soft: var(--tc-color-danger-soft);
  --destructive: #B23A3A;
  --focus: #006B8F;

  /* design-system.css compatibility */
  --ds-primary: #0D9488;
  --ds-primary-dark: var(--tc-color-primary-strong);
  --ds-primary-deep: var(--tc-color-primary-strong);
  --ds-primary-mid: #14B8A6;
  --ds-primary-light: #5EEAD4;
  --ds-primary-soft: var(--tc-color-primary-soft);
  --ds-primary-tint: var(--tc-color-primary-subtle);
  --ds-primary-line: rgba(13, 148, 136, .24);
  --ds-bg: #FAFBFC;
  --ds-surface: #FFFFFF;
  --ds-text: #1A2332;
  --ds-text-soft: #4A5568;
  --ds-text-faint: #7F918C;
  --ds-line: #C9D2CF;
  --ds-accent: #F97316;
  --ds-accent-dark: var(--tc-color-accent-strong);
  --ds-accent-soft: var(--tc-color-accent-soft);
  --ds-danger: #B23A3A;
  --ds-danger-soft: var(--tc-color-danger-soft);
  --ds-success: #277A55;
}

/* Public homepage: navy structure, teal action, plum emphasis only. */
body.tcslp-content-home {
  --home-navy: var(--tc-color-secondary);
  --home-ink: var(--tc-color-text);
  --home-muted: var(--tc-color-muted);
  --home-green: var(--tc-color-primary);
  --home-green-deep: var(--tc-color-primary-strong);
  --home-sage: var(--tc-color-primary-soft);
  --home-coral: var(--tc-color-accent);
  --home-line: var(--tc-color-border);
  --home-paper: var(--tc-color-background);
}

body.tcslp-content-home :is(
  .brand h1,
  .lp-hero-title,
  .lp-section-head h2,
  .resource-index-head h2,
  .section-title,
  .site-footer h2
) {
  color: var(--tc-color-secondary) !important;
}

body.tcslp-content-home :is(.lp-btn-primary, .header-auth-register) {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary) !important;
  color: var(--tc-color-on-primary) !important;
}

body.tcslp-content-home :is(.lp-btn-primary, .header-auth-register):hover {
  border-color: var(--tc-color-primary-strong) !important;
  background: var(--tc-color-primary-strong) !important;
}

body.tcslp-content-home :is(
  .audience-path--parent .audience-path__index,
  .lp-feature-chip
) {
  color: var(--tc-color-accent) !important;
}

/* Assessment/training/material directory */
body.tcslp-workflow-directory {
  --directory-navy: var(--tc-color-secondary);
  --directory-green: var(--tc-color-primary);
  --directory-green-deep: var(--tc-color-primary-strong);
  --directory-green-soft: var(--tc-color-primary-soft);
  --directory-ink: var(--tc-color-text);
  --directory-body: var(--tc-color-muted);
  --directory-muted: var(--tc-color-muted);
  --directory-line: var(--tc-color-border);
}

body.tcslp-workflow-directory :is(
  .directory-top-brand,
  h1,
  .section-head h2,
  .group-name,
  .tool-name
) {
  color: var(--tc-color-secondary) !important;
}

body.tcslp-workflow-directory :is(
  .directory-workflow-rail a:hover,
  .directory-workflow-rail a[aria-current="true"],
  .bottom-actions .pill-link
) {
  border-color: var(--tc-color-primary) !important;
  color: var(--tc-color-primary-strong) !important;
}

/* Therapist workbench */
body.tcslp-workbench {
  --brand: var(--tc-color-primary);
  --brand-strong: var(--tc-color-primary-strong);
  --brand-soft: var(--tc-color-primary-soft);
  --ink: var(--tc-color-text);
  --muted: var(--tc-color-muted);
  --subtle: var(--tc-color-border-strong);
  --line: var(--tc-color-border);
  --line-strong: var(--tc-color-border-strong);
  --page: var(--tc-color-background);
  --surface: var(--tc-color-surface);
  --amber: var(--tc-color-warning);
  --amber-soft: var(--tc-color-warning-soft);
  --green: var(--tc-color-success);
  --green-soft: var(--tc-color-success-soft);
  --tc-ws-navy: var(--tc-color-secondary);
  --tc-ws-navy-2: var(--tc-color-secondary-strong);
  --tc-ws-green: var(--tc-color-primary);
  --tc-ws-green-dark: var(--tc-color-primary-strong);
  --tc-ws-sage: var(--tc-color-primary-soft);
  --tc-ws-paper: var(--tc-color-surface);
  --tc-ws-warm: var(--tc-color-background);
  --tc-ws-ink: var(--tc-color-text);
  --tc-ws-muted: var(--tc-color-muted);
  --tc-ws-line: var(--tc-color-border);
  --tc-ws-amber: var(--tc-color-warning);
}

body.tcslp-workbench :is(.sidebar, .mobile-nav) {
  background: var(--tc-color-secondary) !important;
}

body.tcslp-workbench :is(
  #quickCreate,
  .primary-button,
  .button-primary,
  .btn-primary,
  .start-lesson-button,
  .complete-lesson-button
) {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary) !important;
  color: var(--tc-color-on-primary) !important;
}

body.tcslp-workbench :is(
  #quickCreate,
  .primary-button,
  .button-primary,
  .btn-primary,
  .start-lesson-button,
  .complete-lesson-button
):hover:not(:disabled) {
  border-color: var(--tc-color-primary-strong) !important;
  background: var(--tc-color-primary-strong) !important;
}

body.tcslp-workbench .global-search:focus-within {
  border-color: var(--tc-color-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-color-focus) 18%, transparent) !important;
}

body.tcslp-workbench :is(.metric:hover, .metric.active) {
  border-color: var(--tc-color-primary) !important;
  box-shadow: inset 0 0 0 1px var(--tc-color-primary-soft) !important;
}

body.tcslp-workbench .row-action {
  border-color: var(--tc-color-primary) !important;
  color: var(--tc-color-primary-strong) !important;
}

body.tcslp-workbench :is(.row-action:hover, .task-action:hover) {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary) !important;
  color: var(--tc-color-on-primary) !important;
}

body.tcslp-workbench :is(.shortcuts-panel, .focus-strip, .next-lesson-card) {
  border-color: var(--tc-color-border) !important;
  box-shadow: 0 6px 20px rgba(32, 53, 74, .06) !important;
}

body.tcslp-workbench .shortcuts-panel {
  background: linear-gradient(135deg, var(--tc-color-primary-subtle), var(--tc-color-surface)) !important;
}

body.tcslp-workbench .shortcuts-panel .panel-head {
  border-bottom-color: var(--tc-color-border) !important;
}

body.tcslp-workbench .shortcut-grid button {
  border-color: var(--tc-color-border) !important;
}

body.tcslp-workbench .shortcut-grid button:hover {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary) !important;
  color: var(--tc-color-on-primary) !important;
  box-shadow: 0 8px 20px rgba(13, 148, 136, .22) !important;
}

body.tcslp-workbench :is(.focus-now, .next-lesson-main) {
  background: linear-gradient(90deg, var(--tc-color-primary-soft), var(--tc-color-surface)) !important;
}

body.tcslp-workbench :is(.focus-strip, .task-action) {
  border-color: var(--tc-color-border) !important;
}

body.tcslp-workbench .task-action {
  background: var(--tc-color-primary-subtle) !important;
  color: var(--tc-color-primary-strong) !important;
}

body.tcslp-workbench :is(.focus-mark, .focus-action, .next-lesson-action) {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary) !important;
  color: var(--tc-color-on-primary) !important;
}

body.tcslp-workbench :is(.focus-action, .next-lesson-action):hover {
  background: var(--tc-color-primary-strong) !important;
}

body.tcslp-workbench .schedule-row.row-focus {
  background: var(--tc-color-primary-subtle) !important;
  box-shadow: inset 4px 0 0 var(--tc-color-primary) !important;
}

/* Student management */
body.tcslp-students {
  --primary: var(--tc-color-primary);
  /* Product selections stay clinical teal; berry is reserved for one explicit shortcut. */
  --accent: var(--tc-color-primary);
  --background: var(--tc-color-background);
  --panel-bg: var(--tc-color-surface);
  --card-bg: var(--tc-color-surface);
  --success: var(--tc-color-success);
  --warning: var(--tc-color-warning);
  --destructive: var(--tc-color-danger);
  --primary-foreground: var(--tc-color-on-primary);
  --text-primary: var(--tc-color-text);
  --text-secondary: var(--tc-color-muted);
  --text-tertiary: var(--tc-color-muted);
}

body.tcslp-students :is(
  .add-btn,
  .action-btn.primary,
  .ra-btn.primary,
  .save-btn.primary,
  .modal-btn.primary
) {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary) !important;
  color: var(--tc-color-on-primary) !important;
}

body.tcslp-students .add-btn {
  box-shadow: 0 7px 16px rgba(13, 148, 136, .18) !important;
}

body.tcslp-students :is(
  .add-btn,
  .action-btn.primary,
  .ra-btn.primary,
  .save-btn.primary,
  .modal-btn.primary
):hover:not(:disabled) {
  border-color: var(--tc-color-primary-strong) !important;
  background: var(--tc-color-primary-strong) !important;
}

body.tcslp-students :is(
  .student-search:focus,
  .modal-input:focus,
  .modal-select:focus,
  .modal-textarea:focus,
  .assessment-search:focus,
  .assessment-filter:focus
) {
  border-color: var(--tc-color-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-color-focus) 16%, transparent) !important;
}

body.tcslp-students .student-item.active {
  border-left-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary-soft) !important;
}

body.tcslp-students :is(
  .level-opt.selected,
  .tag-opt.selected,
  .day-tag.selected
) {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary-soft) !important;
  color: var(--tc-color-primary-strong) !important;
}

body.tcslp-students .type-option.selected {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary-soft) !important;
  color: var(--tc-color-primary-strong) !important;
}

body.tcslp-students .flow-train-btn {
  border-color: var(--tc-color-accent) !important;
  background: var(--tc-color-accent) !important;
  color: var(--tc-color-on-accent) !important;
  box-shadow: 0 5px 14px rgba(140, 47, 98, .22) !important;
}

body.tcslp-students .flow-train-btn:hover {
  border-color: var(--tc-color-accent-strong) !important;
  background: var(--tc-color-accent-strong) !important;
}

/* Membership/account surfaces
   主色（--primary/--brand/--gold-gradient 等）由会员中心页面内联样式以金色定义，
   这里只映射中性色，避免后加载覆盖页面金色。 */
body.tcslp-membership {
  --background: var(--tc-color-background);
  --surface: var(--tc-color-surface);
  --text: var(--tc-color-text);
  --muted: var(--tc-color-muted);
  --text-light: var(--tc-color-muted);
  --border: var(--tc-color-border);
}

body.tcslp-membership :is(.btn-primary, .primary-button, .membership-cta) {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary) !important;
  color: var(--tc-color-on-primary) !important;
}

body.tcslp-membership :is(
  .nav-back,
  .nav-login-btn,
  .status-card,
  .login-prompt-icon,
  .login-prompt button,
  .plan-card-tag,
  .plan-btn,
  .pw-submit,
  #generateInviteBtn,
  .invite-shortcut,
  .course-entry-primary
) {
  box-shadow: 0 6px 20px rgba(13, 148, 136, .22) !important;
}

body.tcslp-membership :is(#generateInviteBtn, .invite-shortcut) {
  background: var(--gold-gradient) !important;
  color: var(--tc-color-on-primary) !important;
}

body.tcslp-membership :is(
  .btn-primary,
  .primary-button,
  .membership-cta,
  .nav-back,
  .nav-login-btn,
  .login-prompt button,
  .plan-btn,
  .pw-submit,
  #generateInviteBtn,
  .invite-shortcut,
  .course-entry-primary
):hover:not(:disabled) {
  border-color: var(--tc-color-primary-strong) !important;
  background: var(--tc-color-primary-strong) !important;
}

body.tcslp-membership .invite-stat-num {
  color: var(--tc-color-accent) !important;
}

body.tcslp-membership .pw-field input:focus {
  border-color: var(--tc-color-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-color-focus) 16%, transparent) !important;
}

@keyframes invite-code-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(140, 47, 98, .2); }
  50% { text-shadow: 0 0 12px rgba(140, 47, 98, .42); }
}

@keyframes invite-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(13, 148, 136, .22); }
  50% { transform: scale(1.03); box-shadow: 0 6px 22px rgba(13, 148, 136, .34); }
}

@keyframes invite-pulse-soft {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(13, 148, 136, .2); }
  50% { transform: scale(1.03); box-shadow: 0 6px 16px rgba(13, 148, 136, .3); }
}

/* Older tools receive the same contract without structural changes. */
body.tcslp-tools-legacy {
  --brand: var(--tc-color-primary);
  --brand-strong: var(--tc-color-primary-strong);
  --brand-soft: var(--tc-color-primary-soft);
  --primary: var(--tc-color-primary);
  --primary-dark: var(--tc-color-primary-strong);
  --primary-soft: var(--tc-color-primary-soft);
  --accent: var(--tc-color-accent);
  --background: var(--tc-color-background);
  --surface: var(--tc-color-surface);
  --text: var(--tc-color-text);
  --muted: var(--tc-color-muted);
  --text-light: var(--tc-color-muted);
  --border: var(--tc-color-border);
  --success: var(--tc-color-success);
  --warning: var(--tc-color-warning);
  --danger: var(--tc-color-danger);
  --destructive: var(--tc-color-danger);
  --gold-gradient: linear-gradient(135deg, var(--tc-color-primary), var(--tc-color-primary-strong));
}

body.tcslp-tools-legacy :is(.btn-primary, .primary-button, [data-variant="primary"]) {
  border-color: var(--tc-color-primary) !important;
  background: var(--tc-color-primary) !important;
  color: var(--tc-color-on-primary) !important;
}

body.tcslp-tools-legacy :is(
  .btn-primary,
  .primary-button,
  [data-variant="primary"],
  .nav-back,
  .float-consult-toggle
):hover:not(:disabled) {
  border-color: var(--tc-color-primary-strong) !important;
  background: var(--tc-color-primary-strong) !important;
}

body.tcslp-tools-legacy :is(.nav-back, .float-consult-toggle, .float-consult-item-icon, .tool-badge) {
  box-shadow: 0 6px 18px rgba(13, 148, 136, .22) !important;
}

body.tcslp-tools-legacy .tool-lock-tag--trial {
  border-color: var(--tc-color-warning) !important;
  background: var(--tc-color-warning-soft) !important;
  color: var(--tc-color-warning) !important;
}

/* White-label semantic actions use deliberately dark, AA-safe fills. */
:where(
  body.tcslp-content-home,
  body.tcslp-workflow-directory,
  body.tcslp-workbench,
  body.tcslp-students,
  body.tcslp-membership,
  body.tcslp-tools-legacy
) :is(.btn-success, [data-variant="success"]) {
  background-color: var(--tc-color-success) !important;
  color: var(--tc-color-on-success) !important;
}

:where(
  body.tcslp-content-home,
  body.tcslp-workflow-directory,
  body.tcslp-workbench,
  body.tcslp-students,
  body.tcslp-membership,
  body.tcslp-tools-legacy
) :is(.btn-warning, [data-variant="warning"]) {
  background-color: var(--tc-color-warning) !important;
  color: var(--tc-color-on-warning) !important;
}

:where(
  body.tcslp-content-home,
  body.tcslp-workflow-directory,
  body.tcslp-workbench,
  body.tcslp-students,
  body.tcslp-membership,
  body.tcslp-tools-legacy
) :is(.btn-danger, [data-variant="danger"]) {
  background-color: var(--tc-color-danger) !important;
  color: var(--tc-color-on-danger) !important;
}

/* One keyboard-focus treatment across all migrated surfaces. */
:where(
  body.tcslp-content-home,
  body.tcslp-workflow-directory,
  body.tcslp-workbench,
  body.tcslp-students,
  body.tcslp-membership,
  body.tcslp-tools-legacy
) :focus-visible {
  outline: 3px solid #006B8F !important;
  outline-offset: 2px !important;
}

/* The global teal ring needs a light variant against the navy workbench rail. */
body.tcslp-workbench :is(.sidebar, .mobile-nav) :focus-visible {
  outline-color: #FFFFFF !important;
}