/* =====================================================================
   Browns Digital Studio — Meridian Light Mode
   Comprehensive light theme overrides for the Meridian aesthetic.
   Loads LAST to override hardcoded values in older stylesheets.
===================================================================== */

/* ========================================================================
   LIGHT MODE ONLY — Remove Glass Effects from Static Surfaces
======================================================================== */
:root:not([data-theme="dark"]) #view-app .page,
:root[data-theme="light"] #view-app .page {
  /* Override hardcoded glass variables with flat Meridian values */
  --studio-glass: var(--surface);
  --studio-glass-hover: var(--fill-hover);
  --studio-glass-muted: var(--fill);
  --studio-glass-blur: none;
  --studio-glass-border: var(--border);
  --studio-glass-shadow: none;
  --studio-glass-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* ========================================================================
   Dashboard & Content Panels
======================================================================== */

/* Main content panel */
:root:not([data-theme="dark"]) .main-panel,
:root[data-theme="light"] .main-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Dashboard stat cards */
:root:not([data-theme="dark"]) .dash-stat,
:root[data-theme="light"] .dash-stat {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) var(--space-6) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:root:not([data-theme="dark"]) .dash-stat::before,
:root[data-theme="light"] .dash-stat::before {
  display: none !important;
}

/* Stat card header */
:root:not([data-theme="dark"]) .dash-stat-head,
:root[data-theme="light"] .dash-stat-head {
  color: var(--text) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-regular) !important;
}

/* Stat card value */
:root:not([data-theme="dark"]) .dash-stat-val,
:root[data-theme="light"] .dash-stat-val {
  color: var(--text-strong) !important;
  font-weight: var(--weight-medium) !important;
  font-variant-numeric: tabular-nums;
}

/* ========================================================================
   Sidebar & Navigation
======================================================================== */

/* Sidebar background */
:root:not([data-theme="dark"]) .side,
:root[data-theme="light"] .side {
  background: var(--bg-app) !important;
  border-right: 1px solid var(--border) !important;
  backdrop-filter: none !important;
}

/* Sidebar section labels */
:root:not([data-theme="dark"]) .side-label,
:root[data-theme="light"] .side-label {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 var(--space-2) !important;
  height: 32px !important;
  line-height: 32px !important;
}

/* Nav items */
:root:not([data-theme="dark"]) .side-nav-item,
:root[data-theme="light"] .side-nav-item {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 var(--space-2) !important;
  height: 32px !important;
  font-size: var(--text-md) !important;
  font-weight: var(--weight-regular) !important;
  transition: background-color var(--dur-fast) var(--ease-shell),
              color var(--dur-fast) var(--ease-standard) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

:root:not([data-theme="dark"]) .side-nav-item:hover,
:root[data-theme="light"] .side-nav-item:hover {
  background: var(--fill) !important;
  color: var(--text) !important;
}

:root:not([data-theme="dark"]) .side-nav-item.is-active,
:root:not([data-theme="dark"]) .side-nav-item[aria-current="page"],
:root[data-theme="light"] .side-nav-item.is-active,
:root[data-theme="light"] .side-nav-item[aria-current="page"] {
  background: var(--fill-hover) !important;
  color: var(--text-strong) !important;
  font-weight: var(--weight-medium) !important;
}

/* Nav icons */
:root:not([data-theme="dark"]) .side-nav-item svg,
:root[data-theme="light"] .side-nav-item svg {
  opacity: 0.7 !important;
  width: 16px !important;
  height: 16px !important;
}

:root:not([data-theme="dark"]) .side-nav-item:hover svg,
:root:not([data-theme="dark"]) .side-nav-item.is-active svg,
:root[data-theme="light"] .side-nav-item:hover svg,
:root[data-theme="light"] .side-nav-item.is-active svg {
  opacity: 1 !important;
}

/* ========================================================================
   Top Bar / Header
======================================================================== */

:root:not([data-theme="dark"]) .page-head,
:root[data-theme="light"] .page-head {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  height: var(--header-h) !important;
  padding: 0 var(--space-4) 0 var(--space-2) !important;
}

:root:not([data-theme="dark"]) .page-title,
:root[data-theme="light"] .page-title {
  color: var(--text-strong) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-tight) !important;
}

/* ========================================================================
   Cards (Site Cards, Settings Cards, etc.)
======================================================================== */

:root:not([data-theme="dark"]) .site-card,
:root:not([data-theme="dark"]) .settings-card,
:root:not([data-theme="dark"]) .console-panel,
:root[data-theme="light"] .site-card,
:root[data-theme="light"] .settings-card,
:root[data-theme="light"] .console-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: var(--space-5) !important;
}

:root:not([data-theme="dark"]) .site-card::before,
:root:not([data-theme="dark"]) .settings-card::before,
:root:not([data-theme="dark"]) .console-panel::before,
:root[data-theme="light"] .site-card::before,
:root[data-theme="light"] .settings-card::before,
:root[data-theme="light"] .console-panel::before {
  display: none !important;
}

/* Card hover */
:root:not([data-theme="dark"]) .site-card:hover,
:root[data-theme="light"] .site-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* ========================================================================
   Buttons
======================================================================== */

/* Primary button */
:root:not([data-theme="dark"]) .btn-primary,
:root:not([data-theme="dark"]) .btn-cta,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-cta {
  background: var(--brand) !important;
  color: var(--brand-contrast) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: var(--weight-medium) !important;
  padding: 0 var(--space-4) !important;
  height: 36px !important;
  box-shadow: none !important;
  transition: background-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard) !important;
}

:root:not([data-theme="dark"]) .btn-primary:hover,
:root:not([data-theme="dark"]) .btn-cta:hover,
:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .btn-cta:hover {
  background: var(--brand-hover) !important;
}

:root:not([data-theme="dark"]) .btn-primary:active,
:root:not([data-theme="dark"]) .btn-cta:active,
:root[data-theme="light"] .btn-primary:active,
:root[data-theme="light"] .btn-cta:active {
  transform: scale(0.98) !important;
}

/* Secondary button */
:root:not([data-theme="dark"]) .btn-secondary,
:root:not([data-theme="dark"]) .btn,
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .btn {
  background: var(--fill) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: var(--weight-medium) !important;
  padding: 0 var(--space-3) !important;
  height: 36px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:root:not([data-theme="dark"]) .btn-secondary:hover,
:root:not([data-theme="dark"]) .btn:not(.btn-primary):not(.btn-cta):not(.btn-ghost):hover,
:root[data-theme="light"] .btn-secondary:hover,
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-cta):not(.btn-ghost):hover {
  background: var(--fill-hover) !important;
}

/* Ghost button */
:root:not([data-theme="dark"]) .btn-ghost,
:root[data-theme="light"] .btn-ghost {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 var(--space-3) !important;
  height: 36px !important;
}

:root:not([data-theme="dark"]) .btn-ghost:hover,
:root[data-theme="light"] .btn-ghost:hover {
  background: var(--fill) !important;
  color: var(--text) !important;
}

/* ========================================================================
   Inputs & Form Controls
======================================================================== */

:root:not([data-theme="dark"]) input[type="text"],
:root:not([data-theme="dark"]) input[type="email"],
:root:not([data-theme="dark"]) input[type="password"],
:root:not([data-theme="dark"]) input[type="search"],
:root:not([data-theme="dark"]) input[type="url"],
:root:not([data-theme="dark"]) textarea,
:root:not([data-theme="dark"]) select,
:root[data-theme="light"] input[type="text"],
:root[data-theme="light"] input[type="email"],
:root[data-theme="light"] input[type="password"],
:root[data-theme="light"] input[type="search"],
:root[data-theme="light"] input[type="url"],
:root[data-theme="light"] textarea,
:root[data-theme="light"] select {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-size: var(--text-sm) !important;
  padding: 0 var(--space-3) !important;
  height: 36px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard) !important;
}

:root:not([data-theme="dark"]) textarea,
:root[data-theme="light"] textarea {
  height: auto !important;
  min-height: 96px !important;
  padding: var(--space-3) !important;
}

:root:not([data-theme="dark"]) input:focus,
:root:not([data-theme="dark"]) textarea:focus,
:root:not([data-theme="dark"]) select:focus,
:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-soft) !important;
}

:root:not([data-theme="dark"]) ::placeholder,
:root[data-theme="light"] ::placeholder {
  color: var(--text-subtle) !important;
}

/* ========================================================================
   Tables
======================================================================== */

:root:not([data-theme="dark"]) .table-wrap,
:root:not([data-theme="dark"]) .adm-table-wrap,
:root[data-theme="light"] .table-wrap,
:root[data-theme="light"] .adm-table-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: auto !important;
}

:root:not([data-theme="dark"]) table thead,
:root[data-theme="light"] table thead {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

:root:not([data-theme="dark"]) table th,
:root[data-theme="light"] table th {
  color: var(--text-muted) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: var(--space-2) var(--space-3) !important;
  height: 36px !important;
}

:root:not([data-theme="dark"]) table td,
:root[data-theme="light"] table td {
  color: var(--text) !important;
  font-size: var(--text-sm) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-top: 1px solid var(--border) !important;
}

:root:not([data-theme="dark"]) table tr:hover,
:root[data-theme="light"] table tr:hover {
  background: var(--fill) !important;
}

/* ========================================================================
   Modals & Overlays (Keep Glass)
======================================================================== */

:root:not([data-theme="dark"]) .modal,
:root:not([data-theme="dark"]) .dialog,
:root:not([data-theme="dark"]) .popover,
:root:not([data-theme="dark"]) .dropdown,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .dialog,
:root[data-theme="light"] .popover,
:root[data-theme="light"] .dropdown {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-float) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}

/* Modal overlay */
:root:not([data-theme="dark"]) .modal-overlay,
:root:not([data-theme="dark"]) .dialog-overlay,
:root[data-theme="light"] .modal-overlay,
:root[data-theme="light"] .dialog-overlay {
  background: var(--overlay) !important;
}

/* ========================================================================
   Badges & Pills
======================================================================== */

:root:not([data-theme="dark"]) .badge,
:root:not([data-theme="dark"]) .pill,
:root[data-theme="light"] .badge,
:root[data-theme="light"] .pill {
  background: var(--fill) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  font-size: var(--text-2xs) !important;
  font-weight: var(--weight-medium) !important;
  padding: 0 var(--space-2) !important;
  height: 20px !important;
  line-height: 20px !important;
}

/* ========================================================================
   Builder Chrome (Toolbar, Panels)
======================================================================== */

/* Floating toolbar */
:root:not([data-theme="dark"]) .toolbar-float,
:root:not([data-theme="dark"]) .canvas-toolbar,
:root[data-theme="light"] .toolbar-float,
:root[data-theme="light"] .canvas-toolbar {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-float) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  padding: var(--space-1) !important;
  height: 40px !important;
}

/* Side panels (Library, Inspector) */
:root:not([data-theme="dark"]) .panel-left,
:root:not([data-theme="dark"]) .panel-right,
:root:not([data-theme="dark"]) .inspector,
:root:not([data-theme="dark"]) .library,
:root[data-theme="light"] .panel-left,
:root[data-theme="light"] .panel-right,
:root[data-theme="light"] .inspector,
:root[data-theme="light"] .library {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Panel headers */
:root:not([data-theme="dark"]) .panel-head,
:root[data-theme="light"] .panel-head {
  color: var(--text-strong) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: var(--space-3) !important;
}

/* Canvas background */
:root:not([data-theme="dark"]) .canvas,
:root:not([data-theme="dark"]) .builder-canvas,
:root[data-theme="light"] .canvas,
:root[data-theme="light"] .builder-canvas {
  background: var(--fill) !important;
}

/* ========================================================================
   Typography Refinements
======================================================================== */

/* Scope to Studio app UI only (not customer canvas) */
:root:not([data-theme="dark"]) #view-app h1,
:root:not([data-theme="dark"]) #view-app h2,
:root:not([data-theme="dark"]) #view-app h3,
:root:not([data-theme="dark"]) #view-app h4,
:root:not([data-theme="dark"]) #view-auth h1,
:root:not([data-theme="dark"]) #view-auth h2,
:root[data-theme="light"] #view-app h1,
:root[data-theme="light"] #view-app h2,
:root[data-theme="light"] #view-app h3,
:root[data-theme="light"] #view-app h4,
:root[data-theme="light"] #view-auth h1,
:root[data-theme="light"] #view-auth h2 {
  color: var(--text-strong) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-tight) !important;
}

:root:not([data-theme="dark"]) .text-muted,
:root:not([data-theme="dark"]) .text-secondary,
:root[data-theme="light"] .text-muted,
:root[data-theme="light"] .text-secondary {
  color: var(--text-muted) !important;
}

:root:not([data-theme="dark"]) .text-subtle,
:root[data-theme="light"] .text-subtle {
  color: var(--text-subtle) !important;
}

/* ========================================================================
   Empty States
======================================================================== */

:root:not([data-theme="dark"]) .empty-state,
:root:not([data-theme="dark"]) .no-results,
:root[data-theme="light"] .empty-state,
:root[data-theme="light"] .empty-state {
  padding: var(--space-12) var(--space-6) !important;
  text-align: center !important;
}

:root:not([data-theme="dark"]) .empty-state-icon,
:root[data-theme="light"] .empty-state-icon {
  width: 40px !important;
  height: 40px !important;
  background: var(--fill) !important;
  border-radius: var(--radius-md) !important;
  margin: 0 auto var(--space-4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

:root:not([data-theme="dark"]) .empty-state-title,
:root[data-theme="light"] .empty-state-title {
  color: var(--text-strong) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-medium) !important;
  margin-bottom: var(--space-2) !important;
}

:root:not([data-theme="dark"]) .empty-state-text,
:root[data-theme="light"] .empty-state-text {
  color: var(--text-muted) !important;
  font-size: var(--text-sm) !important;
}

/* ========================================================================
   Tabs
======================================================================== */

:root:not([data-theme="dark"]) .tabs,
:root[data-theme="light"] .tabs {
  border-bottom: 1px solid var(--border) !important;
}

:root:not([data-theme="dark"]) .tab,
:root[data-theme="light"] .tab {
  color: var(--text-muted) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  padding: var(--space-2) var(--space-4) !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard) !important;
}

:root:not([data-theme="dark"]) .tab:hover,
:root[data-theme="light"] .tab:hover {
  color: var(--text) !important;
}

:root:not([data-theme="dark"]) .tab.is-active,
:root:not([data-theme="dark"]) .tab[aria-selected="true"],
:root[data-theme="light"] .tab.is-active,
:root[data-theme="light"] .tab[aria-selected="true"] {
  color: var(--text-strong) !important;
  border-bottom-color: var(--brand) !important;
}

/* ========================================================================
   Toast Notifications
======================================================================== */

:root:not([data-theme="dark"]) .toast,
:root:not([data-theme="dark"]) .notification,
:root[data-theme="light"] .toast,
:root[data-theme="light"] .notification {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-float) !important;
  padding: var(--space-3) var(--space-4) !important;
  color: var(--text) !important;
  font-size: var(--text-sm) !important;
}

/* ========================================================================
   Scrollbars
======================================================================== */

:root:not([data-theme="dark"]) ::-webkit-scrollbar,
:root[data-theme="light"] ::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

:root:not([data-theme="dark"]) ::-webkit-scrollbar-track,
:root[data-theme="light"] ::-webkit-scrollbar-track {
  background: transparent !important;
}

:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb,
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--fill-hover) !important;
  border-radius: var(--radius-full) !important;
}

:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover,
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong) !important;
}

/* ========================================================================
   Focus & Hover States
======================================================================== */

:root:not([data-theme="dark"]) *:focus-visible,
:root[data-theme="light"] *:focus-visible {
  outline: 2px solid var(--ring) !important;
  outline-offset: 2px !important;
}

/* Remove overshoot springs */
:root:not([data-theme="dark"]) *,
:root[data-theme="light"] * {
  /* Override any cubic-bezier with overshoot */
  animation-timing-function: var(--ease-out-expo) !important;
  transition-timing-function: var(--ease-standard) !important;
}

/* ========================================================================
   Utilities
======================================================================== */

:root:not([data-theme="dark"]) .divider,
:root[data-theme="light"] .divider {
  border-color: var(--border) !important;
}

:root:not([data-theme="dark"]) .surface,
:root[data-theme="light"] .surface {
  background: var(--surface) !important;
}

:root:not([data-theme="dark"]) .surface-2,
:root[data-theme="light"] .surface-2 {
  background: var(--surface-2) !important;
}