/* Theme overrides (loaded last).
   Adjust these variables to reskin the entire v2 UI. */

:root {
  /* App tokens — teal primary, gold accent */
  --pe-primary: var(--brand-primary);
  --pe-primary-light: color-mix(in srgb, var(--brand-primary) 72%, white 28%);
  --pe-primary-dark: color-mix(in srgb, var(--brand-primary) 82%, black 18%);
  --pe-green: var(--brand-primary);
  --pe-green-soft: color-mix(in srgb, var(--brand-primary) 12%, white 88%);
  --pe-green-deep: color-mix(in srgb, var(--brand-primary) 75%, black 25%);
  --pe-secondary: #64748b;
  --pe-success: var(--pe-green);
  --pe-light-green: var(--brand-surface);
  --pe-bg-light: var(--brand-surface);
  --pe-bg-white: #ffffff;
  --pe-text-dark: #1e293b;
  --pe-text-muted: #475569;
  --pe-border: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  --pe-shadow: rgba(15, 23, 42, 0.1);

  /* Studio page tokens */
  --pe-bg: var(--pe-bg-light);
  --pe-panel-bg: var(--pe-bg-white);

  /* Bootstrap mapping */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 14, 116, 144;
  --bs-success: var(--brand-primary);
  --bs-success-rgb: 14, 116, 144;
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--pe-primary-dark);
}

/* Button overrides — teal primary on all pages */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--pe-primary-dark);
  --bs-btn-hover-border-color: var(--pe-primary-dark);
  --bs-btn-active-bg: var(--pe-primary-dark);
  --bs-btn-active-border-color: var(--pe-primary-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--pe-primary-dark);
  --bs-btn-active-border-color: var(--pe-primary-dark);
}