/**
 * GateKeeper — Refined surface (optional)
 * Activated when html[data-surface="refined"]. Classic (default attribute absent or "classic") keeps the original Deep Teal tokens.
 */
html[data-surface="refined"] {
  --bg-primary: #D9E2EC;
  --bg-secondary: #CDD8E4;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-header: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-hover: #E8EEF3;
  --bg-pressed: #DEE6EE;
  --border-default: #D6DEE8;
  --border-hover: #B8C4D4;
  --text-primary: #0B1220;
  --text-secondary: #3D4F63;
  --text-muted: #5B6B7C;
  --nav-active-bg: rgba(15, 118, 110, 0.1);
  --nav-active-text: #0F766E;
  --sidebar-border: #D6DEE8;
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 2px 10px rgba(15, 23, 42, 0.08), 0 6px 18px rgba(15, 23, 42, 0.06);
  --gk-bg: #D9E2EC;
  --gk-surface: #FFFFFF;
  --gk-surface-muted: #CDD8E4;
  --gk-border: #D6DEE8;
  --gk-border-strong: #B8C4D4;
  --gk-text: #0B1220;
  --gk-text-muted: #5B6B7C;

  /* Visible controls — slate secondary / solid teal primary */
  --gk-btn-bg: #E2E8F0;
  --gk-btn-color: #0F172A;
  --gk-btn-border: #64748B;
  --gk-btn-hover-bg: #CBD5E1;
  --gk-btn-hover-border: #475569;
  --gk-btn-hover-color: #0F766E;
  --gk-btn-active-bg: rgba(15, 118, 110, 0.12);
  --gk-btn-active-border: rgba(15, 118, 110, 0.45);
  --gk-btn-focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.18);
  --gk-btn-primary-bg: #0F766E;
  --gk-btn-primary-color: #FFFFFF;
  --gk-btn-primary-border: #0F766E;
  --gk-btn-primary-hover-bg: #115E59;
  --gk-btn-primary-hover-border: #115E59;
  --gk-btn-primary-hover-color: #FFFFFF;
}

html[data-surface="refined"][data-theme="dark"] {
  --bg-primary: #0B1220;
  --bg-secondary: #121A27;
  --bg-card: #162032;
  --bg-elevated: #1A2638;
  --bg-sidebar: #0F172A;
  --bg-header: #121A27;
  --bg-input: #121A27;
  --bg-hover: #1E2A3C;
  --bg-pressed: #243247;
  --border-default: #243247;
  --border-hover: #334155;
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --nav-active-bg: rgba(15, 118, 110, 0.22);
  --nav-active-text: #5EEAD4;
  --sidebar-border: #243247;
  --gk-bg: #0B1220;
  --gk-surface: #162032;
  --gk-surface-muted: #121A27;
  --gk-border: #243247;
  --gk-border-strong: #334155;
  --gk-text: #F8FAFC;
  --gk-text-muted: #94A3B8;
  --gk-btn-bg: #1E293B;
  --gk-btn-color: #E2E8F0;
  --gk-btn-border: #64748B;
  --gk-btn-hover-bg: #334155;
  --gk-btn-hover-border: #94A3B8;
  --gk-btn-hover-color: #5EEAD4;
  --gk-btn-primary-bg: #0F766E;
  --gk-btn-primary-color: #FFFFFF;
  --gk-btn-primary-border: #14B8A6;
  --gk-btn-primary-hover-bg: #0D9488;
  --gk-btn-primary-hover-border: #2DD4BF;
  --gk-btn-primary-hover-color: #FFFFFF;
}

/* —— Typography —— */
html[data-surface="refined"] .content-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
html[data-surface="refined"] .content-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}
html[data-surface="refined"] h1,
html[data-surface="refined"] h2,
html[data-surface="refined"] .settings-subhead,
html[data-surface="refined"] .home-section-title {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
html[data-surface="refined"] .muted {
  color: var(--text-muted);
}

/* —— Active nav edge —— */
html[data-surface="refined"] .nav-link {
  border-inline-start: 3px solid transparent;
}
html[data-surface="refined"] .nav-link.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  font-weight: 700;
  border-inline-start-color: var(--teal-primary);
  box-shadow: none;
}
html[data-surface="refined"] .nav-link.active .nav-icon {
  color: var(--nav-active-text);
  opacity: 1;
}
html[data-surface="refined"][data-theme="dark"] .nav-link.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}
html[data-surface="refined"][data-theme="dark"] .nav-link.active .nav-icon {
  color: var(--nav-active-text);
}

/* —— Buttons (outline = slate fill; primary = solid teal) —— */
html[data-surface="refined"] .btn-outline,
html[data-surface="refined"] a.btn-outline,
html[data-surface="refined"] .btn-primary,
html[data-surface="refined"] a.btn-primary,
html[data-surface="refined"] .gk-btn,
html[data-surface="refined"] .lang-dd-btn.btn-outline,
html[data-surface="refined"] .lang-dd-btn.gk-btn {
  background: var(--gk-btn-bg);
  color: var(--gk-btn-color);
  border: 1px solid var(--gk-btn-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
html[data-surface="refined"] .btn-outline:hover,
html[data-surface="refined"] a.btn-outline:hover,
html[data-surface="refined"] .gk-btn:hover,
html[data-surface="refined"] .lang-dd-btn.btn-outline:hover {
  background: var(--gk-btn-hover-bg);
  border-color: var(--gk-btn-hover-border);
  color: var(--gk-btn-hover-color);
}
html[data-surface="refined"] .btn-primary,
html[data-surface="refined"] a.btn-primary,
html[data-surface="refined"] a.btn-primary:visited,
html[data-surface="refined"] button.btn-primary {
  background: var(--gk-btn-primary-bg);
  border-color: var(--gk-btn-primary-border);
  color: var(--gk-btn-primary-color);
  box-shadow: none;
}
html[data-surface="refined"] .btn-primary:hover,
html[data-surface="refined"] a.btn-primary:hover,
html[data-surface="refined"] a.btn-primary:active {
  background: var(--gk-btn-primary-hover-bg);
  border-color: var(--gk-btn-primary-hover-border);
  color: var(--gk-btn-primary-hover-color);
}
html[data-surface="refined"] .btn-primary:active {
  background: var(--gk-btn-primary-hover-bg);
  border-color: var(--gk-btn-primary-hover-border);
  color: var(--gk-btn-primary-hover-color);
}
html[data-surface="refined"] .btn-primary:disabled,
html[data-surface="refined"] .btn-primary[disabled] {
  background: var(--gk-btn-primary-bg);
  border-color: var(--gk-btn-primary-border);
  color: var(--gk-btn-primary-color);
  opacity: 0.45;
}
html[data-surface="refined"] .btn-primary:focus-visible,
html[data-surface="refined"] .btn-outline:focus-visible {
  box-shadow: var(--gk-btn-focus-ring);
}

/* Danger stays readable on refined */
html[data-surface="refined"] .btn-danger {
  background: #FEF2F2;
  border-color: #F87171;
  color: #B91C1C;
  box-shadow: none;
}
html[data-surface="refined"] .btn-danger:hover {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #991B1B;
}

/* Notices with teal edge */
html[data-surface="refined"] .notice {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-inline-start: 3px solid var(--teal-primary);
  box-shadow: none;
}

/* Cards sit clearer on cooler canvas */
html[data-surface="refined"] .card,
html[data-surface="refined"] .settings-section,
html[data-surface="refined"] .home-stat,
html[data-surface="refined"] .stat,
html[data-surface="refined"] .approvals-card,
html[data-surface="refined"] .module-tile,
html[data-surface="refined"] .home-action-card {
  border-color: var(--border-default);
  box-shadow: var(--shadow-soft);
}

html[data-surface="refined"] .content-topbar {
  background: var(--bg-header);
  border-bottom-color: var(--border-default);
}

/* Mobile apple chrome meta alignment */
html.gk-mobile[data-surface="refined"]:not([data-theme="dark"]) {
  --bg-primary: #D9E2EC;
  --ios-bg: #D9E2EC;
  --gk-bg: #D9E2EC;
  --bg-deep: #D9E2EC;
  --bg-base: #D9E2EC;
}
html.gk-mobile[data-surface="refined"][data-theme="dark"] {
  --ios-bg: #0B1220;
  --bg-primary: #0B1220;
  --gk-bg: #0B1220;
}

/* Beat mobile-apple !important white buttons + iOS canvas */
html.gk-mobile[data-surface="refined"],
html.gk-mobile[data-surface="refined"] body {
  background: var(--ios-bg) !important;
}

html.gk-mobile[data-surface="refined"] .btn-outline,
html.gk-mobile[data-surface="refined"] a.btn-outline,
html.gk-mobile[data-surface="refined"] .login-biometric,
html.gk-mobile[data-surface="refined"] .login-microsoft,
html.gk-mobile[data-surface="refined"] .gk-btn,
html.gk-mobile[data-surface="refined"] .lobby-kiosk-cta,
html.gk-mobile[data-surface="refined"] .lobby-kiosk-exit {
  background: var(--gk-btn-bg) !important;
  border: 1px solid var(--gk-btn-border) !important;
  color: var(--gk-btn-color) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
html.gk-mobile[data-surface="refined"] .btn-outline:active,
html.gk-mobile[data-surface="refined"] a.btn-outline:active,
html.gk-mobile[data-surface="refined"] .login-biometric:active,
html.gk-mobile[data-surface="refined"] .login-microsoft:active {
  background: var(--gk-btn-hover-bg) !important;
  border-color: var(--gk-btn-hover-border) !important;
  color: var(--gk-btn-hover-color) !important;
}

html.gk-mobile[data-surface="refined"] .btn-primary,
html.gk-mobile[data-surface="refined"] .login-card .btn-primary,
html.gk-mobile[data-surface="refined"] .login-submit,
html.gk-mobile[data-surface="refined"] a.btn-primary {
  background: var(--gk-btn-primary-bg) !important;
  border: 1px solid var(--gk-btn-primary-border) !important;
  color: var(--gk-btn-primary-color) !important;
  box-shadow: none !important;
}
html.gk-mobile[data-surface="refined"] .btn-primary:active,
html.gk-mobile[data-surface="refined"] .login-card .btn-primary:active,
html.gk-mobile[data-surface="refined"] .login-submit:active,
html.gk-mobile[data-surface="refined"] a.btn-primary:active {
  background: var(--gk-btn-primary-hover-bg) !important;
  border-color: var(--gk-btn-primary-hover-border) !important;
  color: var(--gk-btn-primary-hover-color) !important;
}

/* Desk login / broad btn-* rule — force primary actions to solid teal */
html[data-surface="refined"] .login-submit,
html[data-surface="refined"] button.btn-primary,
html[data-surface="refined"] .btn-primary.login-submit {
  background: var(--gk-btn-primary-bg) !important;
  border-color: var(--gk-btn-primary-border) !important;
  color: var(--gk-btn-primary-color) !important;
}
html[data-surface="refined"] .login-biometric,
html[data-surface="refined"] .login-microsoft {
  background: var(--gk-btn-bg) !important;
  border-color: var(--gk-btn-border) !important;
  color: var(--gk-btn-color) !important;
}

html[data-surface="refined"][data-theme="dark"] .btn-outline,
html[data-surface="refined"][data-theme="dark"] a.btn-outline,
html[data-surface="refined"][data-theme="dark"] .gk-btn {
  background: var(--gk-btn-bg);
  border-color: var(--gk-btn-border);
  color: var(--gk-btn-color);
  box-shadow: none;
}
html[data-surface="refined"][data-theme="dark"] .btn-primary,
html[data-surface="refined"][data-theme="dark"] a.btn-primary,
html[data-surface="refined"][data-theme="dark"] a.btn-primary:hover,
html[data-surface="refined"][data-theme="dark"] a.btn-primary:visited {
  background: var(--gk-btn-primary-bg);
  border-color: var(--gk-btn-primary-border);
  color: var(--gk-btn-primary-color);
}
html[data-surface="refined"][data-theme="dark"] .btn-primary:hover {
  background: var(--gk-btn-primary-hover-bg);
  border-color: var(--gk-btn-primary-hover-border);
  color: var(--gk-btn-primary-hover-color);
}