:root[data-theme="dark"],
.dark {
  --color-bg-base: #000000;
  --color-bg-surface: #1C1C1E;
  --color-bg-surface-raised: #2C2C2E;
  --color-bg-overlay: rgba(255, 255, 255, 0.08);
  --color-bg-scrim: rgba(0, 0, 0, 0.6);
  --color-bg-blur: rgba(28, 28, 30, 0.72);

  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(235, 235, 245, 0.6);
  --color-text-tertiary: rgba(235, 235, 245, 0.3);
  --color-text-disabled: rgba(235, 235, 245, 0.18);
  --color-text-inverse: #000000;
  --color-text-on-accent: #FFFFFF;

  --color-accent-primary: #0A84FF;
  --color-accent-secondary: #64D2FF;
  --color-accent-danger: #FF453A;
  --color-accent-warning: #FF9F0A;
  --color-accent-success: #30D158;
  --color-accent-info: #64D2FF;

  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-default: rgba(255, 255, 255, 0.15);
  --color-border-strong: rgba(255, 255, 255, 0.25);

  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-shadow-strong: rgba(0, 0, 0, 0.65);

  --color-icon-primary: #FFFFFF;
  --color-icon-secondary: rgba(235, 235, 245, 0.6);
  --color-icon-on-accent: #FFFFFF;

  --color-toggle-track-off: rgba(255, 255, 255, 0.18);
  --color-toggle-track-on: #30D158;
  --color-toggle-thumb: #FFFFFF;

  --color-slider-track: rgba(255, 255, 255, 0.15);
  --color-slider-fill: #0A84FF;
  --color-slider-thumb: #FFFFFF;

  --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);

  --color-kbd-bg: #1C1C1E;
  --color-kbd-shadow: #3A3A3C;
  --color-kbd-text: #FFFFFF;

  --color-notification-badge: #FF453A;
  --color-notification-badge-text: #FFFFFF;

  --color-skeleton: rgba(255, 255, 255, 0.08);
  --color-skeleton-shine: rgba(255, 255, 255, 0.04);

  --color-input-bg: #1C1C1E;
  --color-input-border: rgba(255, 255, 255, 0.12);
  --color-input-border-focus: #0A84FF;
  --color-input-placeholder: rgba(235, 235, 245, 0.3);

  --color-divider: rgba(255, 255, 255, 0.08);
  --color-ripple: rgba(255, 255, 255, 0.06);
  --color-selection-bg: rgba(10, 132, 255, 0.3);
  --color-selection-text: #FFFFFF;
  --color-spinner: rgba(235, 235, 245, 0.4);

  --font-body: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-display: -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "Menlo", "Courier New", monospace;

  --icon-filter: invert(1) brightness(0.9);
}

:root[data-theme="dark"],
.dark {
  color-scheme: dark;
}

:root[data-theme="dark"] body,
.dark body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .nav-bar,
.dark .nav-bar {
  background-color: rgba(28, 28, 30, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .tab-bar,
.dark .tab-bar {
  background-color: rgba(28, 28, 30, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .notification-panel,
.dark .notification-panel {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
}

:root[data-theme="dark"] .notification-panel__time,
.dark .notification-panel__time {
  color: #FFFFFF;
}

:root[data-theme="dark"] .notification-panel__date,
.dark .notification-panel__date {
  color: rgba(235, 235, 245, 0.6);
}

:root[data-theme="dark"] .notification-card,
.dark .notification-card {
  background-color: rgba(44, 44, 46, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .quick-tile,
.dark .quick-tile {
  background-color: rgba(44, 44, 46, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .dock__inner,
.dark .dock__inner {
  background-color: rgba(44, 44, 46, 0.6);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .modal-sheet,
.dark .modal-sheet {
  background-color: #2C2C2E;
}

:root[data-theme="dark"] .modal-sheet__handle,
.dark .modal-sheet__handle {
  background-color: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .modal-sheet__header,
.dark .modal-sheet__header {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .modal-sheet__close,
.dark .modal-sheet__close {
  background-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .modal-sheet__footer,
.dark .modal-sheet__footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .alert-dialog__card,
.dark .alert-dialog__card {
  background-color: rgba(44, 44, 46, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

:root[data-theme="dark"] .alert-dialog__actions,
.dark .alert-dialog__actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .alert-dialog__action + .alert-dialog__action,
.dark .alert-dialog__action + .alert-dialog__action {
  border-left-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .context-menu,
.dark .context-menu {
  background-color: rgba(44, 44, 46, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

:root[data-theme="dark"] .context-menu__item + .context-menu__item::before,
.dark .context-menu__item + .context-menu__item::before {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .lock-screen__time,
.dark .lock-screen__time {
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .lock-screen__date,
.dark .lock-screen__date {
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .lock-screen__swipe-indicator,
.dark .lock-screen__swipe-indicator {
  color: rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"] .numpad__key,
.dark .numpad__key {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: transparent;
  color: #FFFFFF;
}

:root[data-theme="dark"] .numpad__key:active,
.dark .numpad__key:active {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .numpad__key-letters,
.dark .numpad__key-letters {
  color: rgba(255, 255, 255, 0.6);
}

:root[data-theme="dark"] .pin-entry__dot,
.dark .pin-entry__dot {
  border-color: #FFFFFF;
}

:root[data-theme="dark"] .pin-entry__dot.filled,
.dark .pin-entry__dot.filled {
  background-color: #FFFFFF;
}

:root[data-theme="dark"] .settings-screen,
.dark .settings-screen {
  background-color: var(--color-bg-base);
}

:root[data-theme="dark"] .settings-profile-card,
.dark .settings-profile-card {
  background-color: var(--color-bg-surface);
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .list-group,
.dark .list-group {
  background-color: var(--color-bg-surface);
  border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .list-row,
.dark .list-row {
  background-color: var(--color-bg-surface);
}

:root[data-theme="dark"] .list-row:active,
.dark .list-row:active {
  background-color: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .list-row + .list-row::before,
.dark .list-row + .list-row::before {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .calc-screen,
.dark .calc-screen {
  background-color: #000000;
}

:root[data-theme="dark"] .calc-display__expression,
.dark .calc-display__expression {
  color: rgba(255, 255, 255, 0.4);
}

:root[data-theme="dark"] .calc-display__result,
.dark .calc-display__result {
  color: #FFFFFF;
}

:root[data-theme="dark"] .calc-key,
.dark .calc-key {
  background-color: #333333;
  color: #FFFFFF;
}

:root[data-theme="dark"] .calc-key--operator,
.dark .calc-key--operator {
  background-color: #FF9F0A;
  color: #FFFFFF;
}

:root[data-theme="dark"] .calc-key--action,
.dark .calc-key--action {
  background-color: #636366;
  color: #FFFFFF;
}

:root[data-theme="dark"] .calc-key--equals,
.dark .calc-key--equals {
  background-color: #FF9F0A;
  color: #FFFFFF;
}

:root[data-theme="dark"] .chat-bubble--outgoing,
.dark .chat-bubble--outgoing {
  background-color: #0A84FF;
}

:root[data-theme="dark"] .chat-bubble--incoming,
.dark .chat-bubble--incoming {
  background-color: #2C2C2E;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .chat-composer,
.dark .chat-composer {
  background-color: #1C1C1E;
  border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .chat-composer__input-wrap,
.dark .chat-composer__input-wrap {
  background-color: #2C2C2E;
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .folder-overlay,
.dark .folder-overlay {
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
}

:root[data-theme="dark"] .folder-overlay__grid,
.dark .folder-overlay__grid {
  background-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .maps-bottom-sheet,
.dark .maps-bottom-sheet {
  background-color: #1C1C1E;
}

:root[data-theme="dark"] .maps-bottom-sheet__handle,
.dark .maps-bottom-sheet__handle {
  background-color: rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .maps-search .search-bar,
.dark .maps-search .search-bar {
  background-color: rgba(28, 28, 30, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .maps-fab__btn,
.dark .maps-fab__btn {
  background-color: #2C2C2E;
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .photo-viewer,
.dark .photo-viewer {
  background-color: #000000;
}

:root[data-theme="dark"] .toast,
.dark .toast {
  background-color: rgba(44, 44, 46, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

:root[data-theme="dark"] .toast__text,
.dark .toast__text {
  color: #FFFFFF;
}

:root[data-theme="dark"] .browser-bar,
.dark .browser-bar {
  background-color: rgba(28, 28, 30, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .browser-tabs-bar,
.dark .browser-tabs-bar {
  background-color: rgba(28, 28, 30, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .browser-bar__url,
.dark .browser-bar__url {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .active-call,
.dark .active-call {
  background-color: #000000;
}

:root[data-theme="dark"] .active-call__name,
.dark .active-call__name {
  color: #FFFFFF;
}

:root[data-theme="dark"] .active-call__status,
.dark .active-call__status {
  color: rgba(235, 235, 245, 0.6);
}

:root[data-theme="dark"] .active-call__ctrl-circle,
.dark .active-call__ctrl-circle {
  background-color: rgba(255, 255, 255, 0.12);
}

:root[data-theme="dark"] .active-call__ctrl-label,
.dark .active-call__ctrl-label {
  color: rgba(235, 235, 245, 0.6);
}

:root[data-theme="dark"] .music-player__progress-fill,
.dark .music-player__progress-fill {
  background-color: #FFFFFF;
}

:root[data-theme="dark"] .music-player__artwork,
.dark .music-player__artwork {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .scroll-to-top,
.dark .scroll-to-top {
  background-color: rgba(44, 44, 46, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .segmented-control,
.dark .segmented-control {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .segmented-control__option.active,
.dark .segmented-control__option.active {
  background-color: #3A3A3C;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] .stopwatch-btn--secondary,
.dark .stopwatch-btn--secondary {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: transparent;
}

:root[data-theme="dark"] .calendar-nav-btn,
.dark .calendar-nav-btn {
  background-color: var(--color-bg-surface);
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .calendar-event-card,
.dark .calendar-event-card {
  background-color: var(--color-bg-surface);
  border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .weather-widget,
.dark .weather-widget {
  background-color: var(--color-bg-surface);
  border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .weather-forecast,
.dark .weather-forecast {
  border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .clock-analog__face,
.dark .clock-analog__face {
  background-color: var(--color-bg-surface);
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .widget-card,
.dark .widget-card {
  background-color: var(--color-bg-surface);
  border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .notification-panel__header,
.dark .notification-panel__header {
  border-bottom: none;
}

:root[data-theme="dark"] .home-screen__content,
.dark .home-screen__content {
  background: transparent;
}

:root[data-theme="dark"] .page-dot,
.dark .page-dot {
  background-color: rgba(255, 255, 255, 0.4);
}

:root[data-theme="dark"] .page-dot.active,
.dark .page-dot.active {
  background-color: #FFFFFF;
}

:root[data-theme="dark"] .swipe-actions__content,
.dark .swipe-actions__content {
  background-color: var(--color-bg-surface);
}

:root[data-theme="dark"] .phone-dialer,
.dark .phone-dialer {
  background-color: var(--color-bg-base);
}

:root[data-theme="dark"] .phone-dialer__key,
.dark .phone-dialer__key {
  background-color: var(--color-bg-surface);
  border-color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .file-list-row + .file-list-row::before,
.dark .file-list-row + .file-list-row::before {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .conversation-row + .conversation-row::before,
.dark .conversation-row + .conversation-row::before {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .section-header,
.dark .section-header {
  color: rgba(235, 235, 245, 0.4);
}

:root[data-theme="dark"] .section-footer,
.dark .section-footer {
  color: rgba(235, 235, 245, 0.3);
}

:root[data-theme="dark"] .divider,
.dark .divider {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .divider--thick,
.dark .divider--thick {
  background-color: rgba(255, 255, 255, 0.05);
}

:root[data-theme="dark"] .lap-row,
.dark .lap-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .progress-ring__bg,
.dark .progress-ring__bg {
  stroke: rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .skeleton,
.dark .skeleton {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .skeleton::after,
.dark .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
}

:root[data-theme="dark"] .input-field,
.dark .input-field {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border);
}

:root[data-theme="dark"] .search-bar,
.dark .search-bar {
  background-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .keyboard,
.dark .keyboard {
  background-color: #000000;
  border-top-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .keyboard__key,
.dark .keyboard__key {
  background-color: var(--color-kbd-shadow);
  color: var(--color-kbd-text);
  box-shadow: 0 1px 0 2px rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .keyboard__key--action,
.dark .keyboard__key--action {
  background-color: #1C1C1E;
}

:root[data-theme="dark"] input[type="range"],
.dark input[type="range"] {
  background: linear-gradient(
    to right,
    var(--color-slider-fill) 0%,
    var(--color-slider-fill) var(--slider-pct, 50%),
    var(--color-slider-track) var(--slider-pct, 50%),
    var(--color-slider-track) 100%
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: #000000;
    --color-bg-surface: #1C1C1E;
    --color-bg-surface-raised: #2C2C2E;
    --color-bg-overlay: rgba(255, 255, 255, 0.08);
    --color-bg-scrim: rgba(0, 0, 0, 0.6);
    --color-bg-blur: rgba(28, 28, 30, 0.72);

    --color-text-primary: #FFFFFF;
    --color-text-secondary: rgba(235, 235, 245, 0.6);
    --color-text-tertiary: rgba(235, 235, 245, 0.3);
    --color-text-disabled: rgba(235, 235, 245, 0.18);
    --color-text-inverse: #000000;
    --color-text-on-accent: #FFFFFF;

    --color-accent-primary: #0A84FF;
    --color-accent-secondary: #64D2FF;
    --color-accent-danger: #FF453A;
    --color-accent-warning: #FF9F0A;
    --color-accent-success: #30D158;
    --color-accent-info: #64D2FF;

    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --color-border-default: rgba(255, 255, 255, 0.15);
    --color-border-strong: rgba(255, 255, 255, 0.25);

    --color-shadow: rgba(0, 0, 0, 0.4);
    --color-shadow-strong: rgba(0, 0, 0, 0.65);

    --color-icon-primary: #FFFFFF;
    --color-icon-secondary: rgba(235, 235, 245, 0.6);
    --color-icon-on-accent: #FFFFFF;

    --color-toggle-track-off: rgba(255, 255, 255, 0.18);
    --color-toggle-track-on: #30D158;
    --color-toggle-thumb: #FFFFFF;

    --color-slider-track: rgba(255, 255, 255, 0.15);
    --color-slider-fill: #0A84FF;
    --color-slider-thumb: #FFFFFF;

    --color-scrollbar-thumb: rgba(255, 255, 255, 0.2);

    --color-kbd-bg: #1C1C1E;
    --color-kbd-shadow: #3A3A3C;
    --color-kbd-text: #FFFFFF;

    --color-notification-badge: #FF453A;
    --color-notification-badge-text: #FFFFFF;

    --color-skeleton: rgba(255, 255, 255, 0.08);
    --color-skeleton-shine: rgba(255, 255, 255, 0.04);

    --color-input-bg: #1C1C1E;
    --color-input-border: rgba(255, 255, 255, 0.12);
    --color-input-border-focus: #0A84FF;
    --color-input-placeholder: rgba(235, 235, 245, 0.3);

    --color-divider: rgba(255, 255, 255, 0.08);
    --color-ripple: rgba(255, 255, 255, 0.06);
    --color-selection-bg: rgba(10, 132, 255, 0.3);
    --color-selection-text: #FFFFFF;
    --color-spinner: rgba(235, 235, 245, 0.4);

    --icon-filter: invert(1) brightness(0.9);
  }
}