/**
 * Appearance enforcement — must load last (after legacy style.css rules).
 */

html[data-app-font-size="small"] {
  font-size: 14px !important;
}

html[data-app-font-size="medium"] {
  font-size: 16px !important;
}

html[data-app-font-size="large"] {
  font-size: 18px !important;
}

body[data-app-font="poppins"] {
  --font: "Poppins", "Segoe UI", sans-serif;
}

body[data-app-font="lato"] {
  --font: "Lato", "Segoe UI", sans-serif;
}

body[data-app-font="inter"] {
  --font: "Inter", "Segoe UI", sans-serif;
}

body[data-app-font="nunito"] {
  --font: "Nunito", "Segoe UI", sans-serif;
}

body[data-app-font="dm-sans"] {
  --font: "DM Sans", "Segoe UI", sans-serif;
}

body[data-app-font="source-sans-3"] {
  --font: "Source Sans 3", "Segoe UI", sans-serif;
}

body[data-app-font="merriweather"] {
  --font: "Merriweather", Georgia, serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font) !important;
}

body[data-app-theme="slack"] {
  --sidebar-bg: #3f0e40;
  --primary: #1264a3;
  --primary-dark: #0b4c8c;
  --primary-light: rgba(18, 100, 163, 0.12);
  --theme-card-gradient: linear-gradient(145deg, #611f69 0%, #3f0e40 52%, #2d0a2e 100%);
  --theme-card-accent: rgba(255, 255, 255, 0.16);
}

body[data-app-theme="destiny-mint"] {
  --sidebar-bg: #2e8f0f;
  --primary: #43a916;
  --primary-dark: #2e8f0f;
  --primary-light: rgba(67, 169, 22, 0.14);
  --bg: #f4fae8;
  --panel-border: #cbe8a8;
  --text: #2e7a0a;
  --heading: #3fa80d;
  --muted: #5a9e3a;
  --tile-text: #ffffff;
  --card-text: #2e7a0a;
  --theme-card-gradient: linear-gradient(145deg, #7dd64a 0%, #43a916 48%, #2e8f0f 100%);
  --theme-card-accent: rgba(220, 239, 194, 0.28);
}

body[data-app-theme="destiny-lime"] {
  --sidebar-bg: #267a00;
  --primary: #6edb43;
  --primary-dark: #35a500;
  --primary-light: rgba(110, 219, 67, 0.16);
  --bg: #f2fbe6;
  --panel-border: #b8e88a;
  --text: #267a00;
  --heading: #35a500;
  --muted: #4f9a2e;
  --tile-text: #ffffff;
  --card-text: #267a00;
  --theme-card-gradient: linear-gradient(145deg, #8defe2 0%, #6edb43 42%, #267a00 100%);
  --theme-card-accent: rgba(200, 245, 238, 0.28);
}

body[data-app-theme="destiny-sage"] {
  --sidebar-bg: #456b24;
  --primary: #8bd45f;
  --primary-dark: #5b9e2d;
  --primary-light: rgba(139, 212, 95, 0.16);
  --bg: #f7fbf1;
  --panel-border: #d4e8c4;
  --text: #456b24;
  --heading: #5b9e2d;
  --muted: #6b8f52;
  --tile-text: #ffffff;
  --card-text: #456b24;
  --theme-card-gradient: linear-gradient(145deg, #cbefc3 0%, #8bd45f 45%, #456b24 100%);
  --theme-card-accent: rgba(228, 245, 223, 0.32);
}

body[data-app-theme] .sidebar.sidebar-shell {
  background: var(--sidebar-bg) !important;
  border-right-color: var(--sidebar-border) !important;
}

body[data-app-theme] .main-content {
  background: var(--workspace-bg, #ffffff);
}

body[data-app-theme] .content-area,
body[data-app-theme] .dashboard-space {
  background: var(--workspace-muted, #f8f8f8) !important;
}

.modal {
  z-index: 12000 !important;
}

.modal-dialog {
  z-index: 12001 !important;
}

.modal-card {
  z-index: 12002 !important;
  position: relative;
}

.modal-backdrop {
  z-index: 0 !important;
}

.sidebar,
.sidebar.sidebar-open {
  z-index: 1101 !important;
}

.mobile-overlay {
  z-index: 1100 !important;
}

body[data-app-theme] .launcher-grid-compact .okta-tile:hover,
body[data-app-theme] .launcher-grid-compact a.dashboard-option-card:hover {
  transform: translateY(-2px) !important;
  border-color: transparent !important;
}

.topbar-lang-toggle {
  flex-shrink: 0;
}

body[data-app-theme] .btn-primary,
body[data-app-theme] .primary-action-btn,
body[data-app-theme] .segmented-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

body[data-app-theme] .btn-primary:hover,
body[data-app-theme] .primary-action-btn:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.topbar-lang-toggle .segmented-control {
  background: var(--panel);
  border-color: var(--panel-border);
}

.topbar-lang-toggle .segmented-btn.is-active {
  background: var(--primary);
  color: #fff;
}

/* Custom color overrides — beat preset theme tokens from slack-theme.css */
body.app-custom-colors .sidebar.sidebar-shell {
  background: var(--sidebar-bg) !important;
}

body.app-custom-colors .main-content {
  background: var(--bg) !important;
}

body.app-custom-colors .content-area,
body.app-custom-colors .dashboard-space {
  background: var(--workspace-muted) !important;
}

body.app-custom-colors .topbar,
body.app-custom-colors .topbar-okta {
  background: var(--topbar-bg) !important;
}

body.app-custom-colors .dashboard-panel-card,
body.app-custom-colors .auth-card,
body.app-custom-colors .take-test-flow-card,
body.app-custom-colors .admin-settings-card {
  background: var(--panel) !important;
  color: var(--card-text) !important;
}

body.app-custom-colors .dashboard-panel-card h3,
body.app-custom-colors .admin-settings-card h3 {
  color: var(--card-text) !important;
}

/* Launcher tiles — centralized tile text token (wins over legacy heading rules) */
body[data-app-theme] .launcher-section .okta-tile,
body[data-app-theme] .launcher-section a.dashboard-option-card,
body[data-app-theme] .launcher-grid-compact .okta-tile,
body[data-app-theme] .launcher-grid-compact a.dashboard-option-card {
  background: var(--theme-card-gradient) !important;
  color: var(--tile-text) !important;
  border-color: transparent !important;
}

body[data-app-theme] .launcher-section .okta-tile h3,
body[data-app-theme] .launcher-section .okta-tile-body h3,
body[data-app-theme] .launcher-section a.dashboard-option-card h3,
body[data-app-theme] .launcher-grid-compact .okta-tile h3,
body[data-app-theme] .launcher-grid-compact .okta-tile-body h3,
body[data-app-theme] .launcher-grid-compact a.dashboard-option-card h3,
body[data-app-theme] .launcher-section .okta-tile-icon,
body[data-app-theme] .launcher-section .dashboard-option-icon,
body[data-app-theme] .launcher-grid-compact .okta-tile-icon,
body[data-app-theme] .launcher-grid-compact .dashboard-option-icon {
  color: var(--tile-text) !important;
}