/* ============================================
   Vii Studio — admin console theme.
   Overrides Bootstrap 5.3's CSS custom properties so every existing admin page (tables, cards,
   modals, forms, badges, buttons) inherits the "Vii Studio" look with no per-page rewrites.
   Palette + type from the approved design canvas. Fonts are already self-hosted via
   css/landing.css's @font-face rules (Cormorant Garamond + Inter) — reused here, never
   Google Fonts (the CSP blocks them).

   Contrast checked against WCAG AA (4.5:1) for body/muted text and badges in both modes —
   see the PR description for the computed ratios; every pair in this palette clears 5:1.
   ============================================ */

:root {
  --studio-radius: 3px;
}

/* ---- Dark (default) ---- */
html[data-bs-theme="dark"] {
  --bs-body-bg: #2A2018;
  --bs-body-color: #FAF8F5;
  --bs-emphasis-color: #FAF8F5;
  --bs-heading-color: #FAF8F5;
  --bs-secondary-color: #B8AFA3;
  --bs-secondary-bg: #35291F;
  --bs-tertiary-bg: #211910;
  --bs-tertiary-color: #B8AFA3;
  --bs-border-color: #4A3B2C;
  --bs-border-color-translucent: #4A3B2C;

  --bs-link-color: #CAA649;
  --bs-link-color-rgb: 202, 166, 73;
  --bs-link-hover-color: #E3C574;
  --bs-link-hover-color-rgb: 227, 197, 116;

  --bs-primary: #CAA649;
  --bs-primary-rgb: 202, 166, 73;
  --bs-primary-text-emphasis: #E3C574;
  --bs-primary-bg-subtle: #3A2E1B;
  --bs-primary-border-subtle: #836721;

  --bs-card-bg: #35291F;
  --bs-card-cap-bg: #2F2419;
  --bs-card-border-color: #4A3B2C;

  --bs-modal-bg: #35291F;
  --bs-modal-header-border-color: #4A3B2C;
  --bs-modal-footer-border-color: #4A3B2C;
  --bs-modal-color: #FAF8F5;

  --bs-table-bg: transparent;
  --bs-table-color: #FAF8F5;
  --bs-table-border-color: #4A3B2C;
  --bs-table-striped-bg: #2F2419;
  --bs-table-striped-color: #FAF8F5;
  --bs-table-hover-bg: #3A2E22;
  --bs-table-hover-color: #FAF8F5;

  --bs-dropdown-bg: #35291F;
  --bs-dropdown-link-color: #FAF8F5;
  --bs-dropdown-border-color: #4A3B2C;
  --bs-dropdown-link-hover-bg: #3A2E22;
  --bs-dropdown-divider-bg: #4A3B2C;

  color-scheme: dark;
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
  background-color: #211910;
  color: #FAF8F5;
  border-color: #4A3B2C;
}

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
  background-color: #211910;
  color: #FAF8F5;
  border-color: #CAA649;
  box-shadow: 0 0 0 0.2rem rgba(202, 166, 73, 0.25);
}

html[data-bs-theme="dark"] .form-control::placeholder {
  color: #B8AFA3;
  opacity: 0.7;
}

/* ---- Light ---- */
html[data-bs-theme="light"] {
  --bs-body-bg: #FAF8F5;
  --bs-body-color: #0E0C0B;
  --bs-emphasis-color: #0E0C0B;
  --bs-heading-color: #0E0C0B;
  --bs-secondary-color: #6B625A;
  --bs-secondary-bg: #F3EFE7;
  --bs-tertiary-bg: #F3EFE7;
  --bs-tertiary-color: #6B625A;
  --bs-border-color: #E4DDD0;
  --bs-border-color-translucent: #E4DDD0;

  --bs-link-color: #836721;
  --bs-link-color-rgb: 131, 103, 33;
  --bs-link-hover-color: #5E4917;
  --bs-link-hover-color-rgb: 94, 73, 23;

  --bs-primary: #836721;
  --bs-primary-rgb: 131, 103, 33;
  --bs-primary-text-emphasis: #5E4917;
  --bs-primary-bg-subtle: #F3EFE7;
  --bs-primary-border-subtle: #CAA649;

  --bs-card-bg: #FFFFFF;
  --bs-card-cap-bg: #FAF8F5;
  --bs-card-border-color: #E4DDD0;

  --bs-modal-bg: #FFFFFF;
  --bs-modal-header-border-color: #E4DDD0;
  --bs-modal-footer-border-color: #E4DDD0;
  --bs-modal-color: #0E0C0B;

  --bs-table-bg: transparent;
  --bs-table-color: #0E0C0B;
  --bs-table-border-color: #E4DDD0;
  --bs-table-striped-bg: #F8F5EF;
  --bs-table-striped-color: #0E0C0B;
  --bs-table-hover-bg: #F3EFE7;
  --bs-table-hover-color: #0E0C0B;

  --bs-dropdown-bg: #FFFFFF;
  --bs-dropdown-link-color: #0E0C0B;
  --bs-dropdown-border-color: #E4DDD0;
  --bs-dropdown-link-hover-bg: #F3EFE7;
  --bs-dropdown-divider-bg: #E4DDD0;

  color-scheme: light;
}

html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select {
  background-color: #FFFFFF;
  color: #0E0C0B;
  border-color: #E4DDD0;
}

/* ---- Shared: type, buttons, badges ---- */
html[data-bs-theme] body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[data-bs-theme] h1,
html[data-bs-theme] h2,
html[data-bs-theme] h3,
html[data-bs-theme] .card-title,
html[data-bs-theme] .modal-title {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
}

/* Buttons: near-square corners, no gradients (Bootstrap doesn't gradient by default, but pin
   the radius explicitly so a future .btn variant doesn't drift from the brand). */
html[data-bs-theme] .btn,
html[data-bs-theme] .form-control,
html[data-bs-theme] .form-select,
html[data-bs-theme] .card,
html[data-bs-theme] .badge,
html[data-bs-theme] .modal-content {
  border-radius: var(--studio-radius);
  background-image: none;
}

/* .btn-primary / .badge.bg-primary / .text-bg-primary render on the gold accent — dark ink
   text keeps them at ~6.9:1 contrast (white-on-gold would fail AA).

   Bootstrap 5.3's utility classes (.bg-primary, .text-bg-primary) read --bs-primary-rgb at
   runtime, so overriding --bs-primary above was enough for those. .btn-primary is different:
   the compiled bootstrap.min.css bakes each button variant's colors into its OWN
   component-scoped custom properties (--bs-btn-bg, --bs-btn-border-color, --bs-btn-hover-bg,
   etc.) from the original theme color at build time — they don't reference --bs-primary at
   all. Setting only `color` here (as an earlier pass did) left the background/border on
   Bootstrap's stock blue. Every --bs-btn-* the button component itself uses must be
   overridden directly, in both modes — the design calls for the same gold-with-ink-text
   treatment regardless of light/dark, not each mode's own accent color. */
html[data-bs-theme] .btn-primary {
  --bs-btn-color: #2A2018;
  --bs-btn-bg: #CAA649;
  --bs-btn-border-color: #CAA649;
  --bs-btn-hover-color: #2A2018;
  --bs-btn-hover-bg: #E3C574;
  --bs-btn-hover-border-color: #E3C574;
  --bs-btn-active-color: #2A2018;
  --bs-btn-active-bg: #E3C574;
  --bs-btn-active-border-color: #E3C574;
  --bs-btn-disabled-color: #2A2018;
  --bs-btn-disabled-bg: #CAA649;
  --bs-btn-disabled-border-color: #CAA649;
  --bs-btn-focus-shadow-rgb: 202, 166, 73;
  /* The --bs-btn-* custom properties above are enough wherever Bootstrap's own `.btn` rule
     (background-color: var(--bs-btn-bg)) is the only thing setting these properties — that
     covers :hover/:active/:disabled. But wwwroot/app.css (the stock `dotnet new blazor`
     template stylesheet, still loaded for its unrelated focus-outline rule) also ships its own
     literal `.btn-primary { background-color: #1b6ec2; border-color: #1861ac }` — a real
     property value, not a var() indirection, at the SAME selector specificity as this rule
     would have without the attribute-selector prefix. It happened to still win here because
     nothing above set `background-color`/`border-color` directly. Setting them directly too
     makes this rule's higher specificity (html[data-bs-theme] .btn-primary vs. app.css's bare
     .btn-primary) the deciding factor instead of source order. */
  background-color: #CAA649;
  border-color: #CAA649;
  color: #2A2018;
}

html[data-bs-theme] .badge.bg-primary,
html[data-bs-theme] .text-bg-primary {
  color: #2A2018;
}

html[data-bs-theme] .btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-color: #2A2018;
  --bs-btn-hover-border-color: var(--bs-primary);
}