/* Cupertino */

:root.dark,
.dark,
[data-theme='dark'] {
  --color-text-primary: #ffffff !important;
  --color-text-secondary: #ebebf5 !important;
  --color-text-tertiary: #ebebf5 !important;
  --color-background-primary: #1e1e1e !important;
  --color-background-secondary: #2c2c2e !important;
  --color-background-tertiary: #3a3a3c !important;
  --color-surface: #2c2c2ee6 !important;
  --color-surface-elevated: #3a3a3cf2 !important;
  --color-border: #38383a !important;
  --color-border-secondary: #38383a80 !important;
  --color-primary: #0a84ff !important;
  --color-primary-hover: #409cff !important;
  --color-accent: #0a84ff !important;
  --color-accent-hover: #409cff !important;
  --color-success: #32d74b !important;
  --color-warning: #ff9f0a !important;
  --color-danger: #ff453a !important;
  --color-error: #ff453a !important;
  --shadow-sm: 0 1px 3px #00000066;
  --shadow-md: 0 4px 12px #00000080, 0 2px 4px #0000004d;
  --shadow-lg: 0 12px 30px #00000099, 0 8px 16px #00000066;
  --shadow-xl: 0 25px 60px #000000b3, 0 15px 30px #00000080;
}

:root,
.light,
[data-theme='light'] {
  --color-text-primary: #000000 !important;
  --color-text-secondary: #3c3c43 !important;
  --color-text-tertiary: #3c3c43 !important;
  --color-background-primary: #ffffff !important;
  --color-background-secondary: #f2f2f7 !important;
  --color-background-tertiary: #ffffff !important;
  --color-surface: #ffffffe6 !important;
  --color-surface-elevated: #ffffffff !important;
  --color-border: #d1d1d6 !important;
  --color-border-secondary: #d1d1d680 !important;
  --color-primary: #007aff !important;
  --color-primary-hover: #0051a8 !important;
  --color-accent: #007aff !important;
  --color-accent-hover: #0051a8 !important;
  --color-success: #34c759 !important;
  --color-warning: #ff9500 !important;
  --color-danger: #ff3b30 !important;
  --color-error: #ff3b30 !important;
  --shadow-sm: 0 1px 2px #0000000d, 0 1px 1px #00000005;
  --shadow-md: 0 4px 12px #00000014, 0 2px 4px #0000000a;
  --shadow-lg: 0 15px 35px #0000001a, 0 5px 15px #00000014;
  --shadow-xl: 0 30px 60px #00000026, 0 15px 30px #00000014;
}
