/* =============================================================================
   macOS 27 Appearance — Light / Dark (follows system when Automatic)
   Applied via html[data-theme="light|dark"] set by MacShell
   User preference stored as data-appearance="auto|light|dark"
   ============================================================================= */

:root,
html[data-theme='light'] {
  color-scheme: light;
  --theme-name: light;

  --color-text: rgba(0, 0, 0, 0.88);
  --color-text-secondary: rgba(0, 0, 0, 0.55);
  --color-text-tertiary: rgba(0, 0, 0, 0.35);
  --color-text-inverse: rgba(255, 255, 255, 0.95);
  --color-separator: rgba(0, 0, 0, 0.1);
  --color-hover: rgba(0, 0, 0, 0.06);
  --color-selection: rgba(10, 132, 255, 0.22);

  --surface-window: rgba(246, 246, 248, 0.82);
  --surface-window-active: rgba(250, 250, 252, 0.88);
  --surface-window-inactive: rgba(236, 236, 240, 0.72);
  --surface-sidebar: rgba(255, 255, 255, 0.28);
  --surface-toolbar: rgba(255, 255, 255, 0.35);
  --surface-main: rgba(255, 255, 255, 0.55);
  --surface-card: rgba(255, 255, 255, 0.55);
  --surface-menu: rgba(246, 246, 248, 0.82);
  --surface-field: rgba(0, 0, 0, 0.06);
  --surface-list-hover: rgba(0, 122, 255, 0.08);
  --surface-widget: rgba(255, 255, 255, 0.22);
  --surface-cc: rgba(255, 255, 255, 0.28);
  --surface-cc-tile: rgba(255, 255, 255, 0.35);
  --surface-dock: rgba(255, 255, 255, 0.14);
  --surface-spotlight: rgba(255, 255, 255, 0.42);
  --surface-doc: #ffffff;
  --surface-sheet: #ffffff;

  --border-glass: rgba(255, 255, 255, 0.55);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --menubar-fg: #ffffff;
  --menubar-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.35), 0 0 8px rgba(0, 0, 0, 0.15);
  --dock-dot: rgba(0, 0, 0, 0.72);
  --wallpaper-top-dim: rgba(0, 0, 0, 0.18);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --theme-name: dark;

  --color-text: rgba(255, 255, 255, 0.92);
  --color-text-secondary: rgba(255, 255, 255, 0.58);
  --color-text-tertiary: rgba(255, 255, 255, 0.38);
  --color-text-inverse: rgba(0, 0, 0, 0.88);
  --color-separator: rgba(255, 255, 255, 0.12);
  --color-hover: rgba(255, 255, 255, 0.08);
  --color-selection: rgba(10, 132, 255, 0.28);

  --surface-window: rgba(36, 36, 38, 0.82);
  --surface-window-active: rgba(42, 42, 46, 0.88);
  --surface-window-inactive: rgba(30, 30, 32, 0.72);
  --surface-sidebar: rgba(28, 28, 30, 0.45);
  --surface-toolbar: rgba(40, 40, 44, 0.5);
  --surface-main: rgba(32, 32, 36, 0.65);
  --surface-card: rgba(48, 48, 52, 0.55);
  --surface-menu: rgba(40, 40, 44, 0.86);
  --surface-field: rgba(255, 255, 255, 0.1);
  --surface-list-hover: rgba(10, 132, 255, 0.2);
  --surface-widget: rgba(30, 30, 34, 0.42);
  --surface-cc: rgba(36, 36, 40, 0.55);
  --surface-cc-tile: rgba(255, 255, 255, 0.1);
  --surface-dock: rgba(30, 30, 34, 0.35);
  --surface-spotlight: rgba(40, 40, 44, 0.72);
  --surface-doc: #1c1c1e;
  --surface-sheet: #2c2c2e;

  --border-glass: rgba(255, 255, 255, 0.18);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --menubar-fg: #ffffff;
  --menubar-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.55), 0 0 10px rgba(0, 0, 0, 0.25);
  --dock-dot: rgba(255, 255, 255, 0.85);
  --wallpaper-top-dim: rgba(0, 0, 0, 0.35);
}

/* Base text color */
html,
body,
#macos {
  color: var(--color-text);
  background: #000;
}

/* Wallpaper top dim adapts */
html[data-theme='dark'] #wallpaper::after {
  background: linear-gradient(
    180deg,
    var(--wallpaper-top-dim) 0%,
    rgba(0, 0, 0, 0.1) 32px,
    transparent 64px
  ) !important;
}

/* Menu bar — still transparent; fg follows theme tokens */
#menubar {
  color: var(--menubar-fg) !important;
  text-shadow: var(--menubar-shadow) !important;
}
#menubar .menubar-item,
#menubar .menubar-icon-btn,
#menubar #clock-text,
#menubar #active-app-name {
  color: var(--menubar-fg) !important;
  text-shadow: var(--menubar-shadow) !important;
}
#menubar .menubar-icon-btn svg {
  fill: var(--menubar-fg) !important;
}

/* Dropdowns */
.menu-dropdown,
#context-menu {
  background: var(--surface-menu) !important;
  color: var(--color-text) !important;
  border-color: var(--border-glass) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
}
.menu-dropdown-item {
  color: var(--color-text) !important;
}
.menu-separator {
  background: var(--color-separator) !important;
}

/* Dock — only tint border/dots; layered glass tray is in liquid-glass.css */
#dock {
  border-color: var(--border-glass) !important;
}
.dock-item.is-running::after,
.dock-indicator {
  background: var(--dock-dot) !important;
}

/* Windows */
.window {
  background: var(--surface-window) !important;
  border-color: var(--border-glass) !important;
  color: var(--color-text) !important;
}
.window.is-active {
  background: var(--surface-window-active) !important;
}
.window.is-inactive {
  background: var(--surface-window-inactive) !important;
}
.window-title {
  color: var(--color-text) !important;
  opacity: 0.85;
}
.window-titlebar:hover .traffic-symbol,
.traffic-lights:hover .traffic-symbol {
  color: var(--color-text) !important;
}

/* App chrome */
.app-layout {
  background: transparent !important;
  color: var(--color-text) !important;
}
.app-sidebar {
  background: var(--surface-sidebar) !important;
  border-right-color: var(--border-subtle) !important;
  color: var(--color-text) !important;
}
.app-sidebar-item {
  color: var(--color-text) !important;
}
.app-sidebar-item:hover {
  background: var(--color-hover) !important;
}
.app-sidebar-item.active {
  background: rgba(0, 122, 255, 0.9) !important;
  color: #fff !important;
}
.app-toolbar {
  background: var(--surface-toolbar) !important;
  border-bottom-color: var(--border-subtle) !important;
  color: var(--color-text) !important;
}
.app-main {
  background: var(--surface-main) !important;
  color: var(--color-text) !important;
}
.app-list-row {
  border-bottom-color: var(--border-subtle) !important;
}
.app-list-row:hover,
.app-list-row.selected {
  background: var(--surface-list-hover) !important;
}
.muted {
  color: var(--color-text-secondary) !important;
}
.row-meta {
  color: var(--color-text-tertiary) !important;
}
.search-field {
  background: var(--surface-field) !important;
  color: var(--color-text) !important;
}
.search-field::placeholder {
  color: var(--color-text-tertiary) !important;
}
.settings-card,
.privacy-report,
.fav-tile,
.now-playing,
.map-card,
.store-hero,
.news-hero,
.stock-chart,
.ff-note {
  background: var(--surface-card) !important;
  border-color: var(--border-glass) !important;
  color: var(--color-text) !important;
}
.settings-row {
  border-bottom-color: var(--border-subtle) !important;
}
.tb-nav,
.tb-actions {
  background: var(--surface-field) !important;
  border-color: var(--border-subtle) !important;
  color: var(--color-text) !important;
}
.url-bar {
  background: var(--surface-field) !important;
  color: var(--color-text-secondary) !important;
}
.bubble.them {
  background: var(--surface-field) !important;
  color: var(--color-text) !important;
}
.msg-header,
.msg-compose,
.finder-pathbar,
.mail-list,
.notes-list {
  border-color: var(--border-subtle) !important;
  color: var(--color-text) !important;
}
.messages-pane {
  background: var(--surface-main) !important;
}
.note-editor,
.mail-read,
.mail-body {
  color: var(--color-text) !important;
}
.doc-page {
  background: var(--surface-doc) !important;
  color: var(--color-text) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}
.sheet {
  background: var(--surface-sheet) !important;
  color: var(--color-text) !important;
}
.sheet th {
  background: var(--surface-field) !important;
}
.sheet th,
.sheet td {
  border-color: var(--border-subtle) !important;
}
.textedit-area {
  background: var(--surface-doc) !important;
  color: var(--color-text) !important;
}
.cal-cell {
  background: var(--surface-field) !important;
  color: var(--color-text) !important;
}
.cal-head {
  color: var(--color-text-secondary) !important;
}
.finder-icon-item {
  color: var(--color-text) !important;
}
.finder-pathbar {
  background: var(--surface-toolbar) !important;
}

/* Widgets */
.widget,
#desktop-widgets .widget {
  background: var(--surface-widget) !important;
  border-color: var(--border-glass) !important;
  color: var(--color-text) !important;
}
#widget-time,
.widget-clock .widget-time {
  color: var(--color-text) !important;
}
#widget-date,
.widget .muted {
  color: var(--color-text-secondary) !important;
}

/* Control Center modules are styled in control-center.css (per-capsule glass).
   Do not force a solid panel background on #control-center. */
#control-center .cc-tile {
  background: var(--surface-cc-tile) !important;
  border-color: var(--border-glass) !important;
  color: var(--color-text) !important;
}
#spotlight .spotlight-box,
#spotlight-panel,
.spotlight-panel,
#spotlight {
  color: var(--color-text);
}
#spotlight input,
#spotlight-input {
  color: var(--color-text) !important;
  background: var(--surface-field) !important;
}
/* Launchpad search chrome is in apps-drawer.css — only inherit text color */
#launchpad-search.apps-search {
  color: inherit !important;
}
#notification-center {
  color: var(--color-text);
}
.notification-card {
  background: var(--surface-card) !important;
  border-color: var(--border-glass) !important;
  color: var(--color-text) !important;
}

/* Launchpad stays dimmed; icons remain colorful */
html[data-theme='dark'] #launchpad {
  background: rgba(10, 12, 18, 0.55) !important;
}

/* Appearance control UI */
.appearance-seg {
  display: flex;
  gap: 8px;
  padding: 4px;
  background: var(--surface-field);
  border-radius: 10px;
}
.appearance-seg button {
  flex: 1;
  padding: 10px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.appearance-seg button .ap-preview {
  width: 52px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  position: relative;
}
.appearance-seg button .ap-preview.light {
  background: linear-gradient(180deg, #e8e8ed 0 28%, #f5f5f7 28%);
}
.appearance-seg button .ap-preview.dark {
  background: linear-gradient(180deg, #1c1c1e 0 28%, #2c2c2e 28%);
}
.appearance-seg button .ap-preview.auto {
  background: linear-gradient(90deg, #f5f5f7 50%, #1c1c1e 50%);
}
.appearance-seg button.is-selected {
  background: var(--surface-card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), inset 0 0 0 1.5px #0a84ff;
}
.cc-tile[data-cc='appearance'] .cc-sublabel {
  text-transform: capitalize;
}

/* Mission Control / Stage strip */
html[data-theme='dark'] #mission-control {
  background: rgba(0, 0, 0, 0.45);
}
html[data-theme='dark'] #stage-manager-strip {
  background: rgba(20, 20, 24, 0.55);
}

/* Stickies stay colorful in both modes */
html[data-theme='dark'] .sticky.y { background: #c9b458; color: #1d1d1f; }
html[data-theme='dark'] .sticky.p { background: #c48b9f; color: #1d1d1f; }
html[data-theme='dark'] .sticky.b { background: #6b9fc9; color: #1d1d1f; }

/* Terminal / Calculator stay intentionally dark */
html[data-theme='light'] .terminal,
html[data-theme='light'] .calc {
  /* keep as designed */
}

/* Weather gradient can stay vivid */
html[data-theme='dark'] .weather-app {
  filter: saturate(0.95) brightness(0.92);
}