:root {
  color-scheme: dark;
  --parsid-bg: #080b12;
  --parsid-surface: #101216;
  --parsid-surface-2: #17191e;
  --parsid-surface-3: #1d2026;
  --parsid-elevated: #13161b;
  --parsid-text: #f5f7fb;
  --parsid-muted: #a8adb6;
  --parsid-muted-2: #7f8793;
  --parsid-border: rgba(255,255,255,.085);
  --parsid-border-strong: rgba(255,255,255,.14);
  --parsid-accent: #75e300;
  --parsid-accent-contrast: #081000;

  --parsid-color-bg: var(--parsid-bg);
  --parsid-color-canvas: var(--parsid-bg);
  --parsid-color-surface: var(--parsid-surface);
  --parsid-color-surface-2: var(--parsid-surface-2);
  --parsid-color-surface-3: var(--parsid-surface-3);
  --parsid-color-elevated: var(--parsid-elevated);
  --parsid-color-text: var(--parsid-text);
  --parsid-color-text-muted: var(--parsid-muted);
  --parsid-color-muted: var(--parsid-muted);
  --parsid-color-muted-2: var(--parsid-muted-2);
  --parsid-color-border: var(--parsid-border);
  --parsid-color-border-strong: var(--parsid-border-strong);
  --parsid-color-accent: var(--parsid-accent);
  --parsid-color-accent-contrast: var(--parsid-accent-contrast);

  --parsid-page-bg: var(--parsid-color-bg);
  --parsid-surface-soft: var(--parsid-color-surface-2);
  --parsid-accent-hover: var(--parsid-color-accent);

  --parsid-radius-sm: 10px;
  --parsid-radius-md: 16px;
  --parsid-radius-lg: 24px;
  --parsid-shadow: 0 18px 50px rgba(0,0,0,.28);
  --parsid-container: min(1600px, calc(100% - 32px));
  --parsid-transition: 180ms cubic-bezier(.2,.8,.2,1);
}

[data-theme="light"] {
  --parsid-bg: #f5f7fb;
  --parsid-surface: #fff;
  --parsid-surface-2: #edf1f7;
  --parsid-surface-3: #e7ecf4;
  --parsid-elevated: #fff;
  --parsid-text: #111827;
  --parsid-muted: #667085;
  --parsid-muted-2: #798396;
  --parsid-border: rgba(17,24,39,.1);
  --parsid-border-strong: rgba(17,24,39,.16);
  --parsid-shadow: 0 18px 50px rgba(17,24,39,.1);
}

.parsid-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}