:root {
  color-scheme: light;

  --header-h: 68px;
  --radius: 0;
  --pad: 14px;
  --shadow: none;

  /* Minimal grayscale scale (light) */
  --mono-0: #ffffff;
  --mono-1: #f0f0f0;
  --mono-2: #d8d8d8;
  --mono-3: #a0a0a0;
  --mono-4: #4a4a4a;
  --mono-5: #151515;

  /* Core palette mapped from scale */
  --tw-bg: var(--mono-1);
  --tw-surface: var(--mono-0);
  --tw-surface-2: var(--mono-1);
  --tw-border: var(--mono-2);
  --tw-text: var(--mono-5);
  --tw-muted: var(--mono-4);
  --tw-accent: var(--mono-4);
  --tw-accent-2: var(--mono-3);
  --tw-black: #000000;
  --tw-overlay: rgba(0, 0, 0, 0.5);

  /* Semantic tokens */
  --color-transparent: rgba(255, 255, 255, 0);
  --color-theme-meta: var(--tw-bg);

  --color-bg: var(--tw-bg);
  --color-panel: var(--tw-surface);
  --color-panel-2: var(--tw-surface-2);
  --color-line: var(--tw-border);
  --color-text: var(--tw-text);
  --color-muted: var(--tw-muted);
  --color-accent: var(--tw-accent);
  --color-accent-2: var(--tw-accent-2);
  --color-ink: var(--tw-surface-2);
  --color-play: var(--tw-accent);

  --color-bg-radial-1: rgba(0, 0, 0, 0.03);
  --color-bg-radial-2: rgba(0, 0, 0, 0.02);

  --color-control-bg: var(--tw-surface-2);
  --color-control-bg-hover: var(--mono-2);
  --color-control-icon-bg: var(--tw-surface-2);
  --color-control-icon-text: var(--tw-text);
  --color-control-icon-border: var(--tw-border);

  --color-date-inner-bg: rgba(255, 255, 255, 0.9);
  --color-date-group-bg: rgba(240, 240, 240, 0.96);

  --color-item-text: rgba(21, 21, 21, 0.96);
  --color-item-hover-bg: rgba(0, 0, 0, 0.05);
  --color-item-active-grad-start: color-mix(in srgb, var(--tw-accent-2) 42%, transparent);
  --color-item-active-grad-end: color-mix(in srgb, var(--tw-accent) 22%, transparent);
  --color-item-active-text: var(--tw-text);
  --color-item-active-outline: color-mix(in srgb, var(--tw-accent) 52%, transparent);
  --color-item-active-age: var(--tw-muted);
  --color-item-active-pointer: var(--tw-accent);
  --color-item-active-pointer-shadow: color-mix(in srgb, var(--tw-accent) 30%, transparent);

  --color-video-header-overlay: rgba(255, 255, 255, 0.22);
  --color-video-header-bg: var(--tw-surface-2);
  --color-badge-bg: var(--tw-surface-2);
  --color-badge-border: var(--tw-border);
  --color-badge-text: var(--tw-text);
  --color-now-text: var(--tw-text);
  --color-ago-text: var(--tw-muted);
  --color-video-black: var(--tw-black);

  --color-empty-overlay-1: rgba(255, 255, 255, 0.02);
  --color-empty-overlay-2: rgba(0, 0, 0, 0.04);
  --color-empty-overlay-base: rgba(240, 240, 240, 0.95);
  --color-empty-title: var(--tw-text);
  --color-empty-note: var(--tw-text);
  --color-empty-note-bar-top: var(--tw-accent-2);
  --color-empty-note-bar-bottom: var(--tw-accent);
  --color-empty-note-strong: var(--tw-text);

  --color-empty-btn-border: var(--tw-border);
  --color-empty-btn-bg-top: var(--tw-surface-2);
  --color-empty-btn-bg-bottom: var(--tw-surface);
  --color-empty-btn-hover-border: var(--tw-accent);
  --color-empty-btn-secondary-border: var(--tw-border);
  --color-empty-btn-secondary-bg: var(--tw-surface);
  --color-empty-btn-secondary-text: var(--tw-muted);
  --color-empty-btn-secondary-hover-border: var(--tw-accent-2);
  --color-empty-btn-secondary-hover-bg: var(--tw-surface-2);

  --color-backdrop: var(--tw-overlay);
  --color-mobile-header-overlay: rgba(255, 255, 255, 0.08);
  --color-mobile-header-bg: var(--tw-surface-2);

  --color-adp-bg: var(--tw-surface);
  --color-adp-bg-hover: var(--tw-surface-2);
  --color-adp-bg-active: var(--mono-2);
  --color-adp-color: var(--tw-text);
  --color-adp-color-secondary: var(--tw-muted);
  --color-adp-current-date: var(--tw-text);
  --color-adp-selected: var(--mono-4);
  --color-adp-selected-hover: var(--mono-3);
  --color-adp-selected-text: var(--mono-1);
  --color-adp-btn: var(--tw-text);
  --color-adp-nav: var(--tw-text);
  --color-adp-other-month: var(--mono-3);
  --color-adp-disabled: var(--mono-2);
  --color-adp-day-name: var(--tw-muted);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    /* Minimal grayscale scale (dark) */
    --mono-0: #0e0e0e;
    --mono-1: #151515;
    --mono-2: #2a2a2a;
    --mono-3: #505050;
    --mono-4: #b6b6b6;
    --mono-5: #ececec;

    --tw-bg: var(--mono-0);
    --tw-surface: var(--mono-1);
    --tw-surface-2: var(--mono-1);
    --tw-border: var(--mono-2);
    --tw-text: var(--mono-5);
    --tw-muted: var(--mono-4);
    --tw-accent: var(--mono-4);
    --tw-accent-2: var(--mono-3);
    --tw-overlay: rgba(0, 0, 0, 0.72);

    --color-theme-meta: var(--tw-bg);
    --color-bg-radial-1: rgba(255, 255, 255, 0.03);
    --color-bg-radial-2: rgba(255, 255, 255, 0.02);
    --color-date-inner-bg: rgba(21, 21, 21, 0.9);
    --color-date-group-bg: rgba(14, 14, 14, 0.96);
    --color-item-text: rgba(236, 236, 236, 0.96);
    --color-video-header-overlay: rgba(255, 255, 255, 0.02);
    --color-empty-overlay-base: rgba(12, 12, 12, 0.95);
    --color-mobile-header-overlay: rgba(255, 255, 255, 0.01);
  }
}

:root[data-theme='light'] {
  color-scheme: light;
}

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

  --mono-0: #0e0e0e;
  --mono-1: #151515;
  --mono-2: #2a2a2a;
  --mono-3: #505050;
  --mono-4: #b6b6b6;
  --mono-5: #ececec;

  --tw-bg: var(--mono-0);
  --tw-surface: var(--mono-1);
  --tw-surface-2: var(--mono-1);
  --tw-border: var(--mono-2);
  --tw-text: var(--mono-5);
  --tw-muted: var(--mono-4);
  --tw-accent: var(--mono-4);
  --tw-accent-2: var(--mono-3);
  --tw-overlay: rgba(0, 0, 0, 0.72);

  --color-theme-meta: var(--tw-bg);
  --color-bg-radial-1: rgba(255, 255, 255, 0.03);
  --color-bg-radial-2: rgba(255, 255, 255, 0.02);
  --color-date-inner-bg: rgba(21, 21, 21, 0.9);
  --color-date-group-bg: rgba(14, 14, 14, 0.96);
  --color-item-text: rgba(236, 236, 236, 0.96);
  --color-video-header-overlay: rgba(255, 255, 255, 0.02);
  --color-empty-overlay-base: rgba(12, 12, 12, 0.95);
  --color-mobile-header-overlay: rgba(255, 255, 255, 0.01);

  --color-item-active-grad-start: color-mix(in srgb, var(--tw-accent) 36%, transparent);
  --color-item-active-grad-end: color-mix(in srgb, var(--tw-accent-2) 22%, transparent);
  --color-item-active-text: var(--tw-text);
  --color-item-active-outline: color-mix(in srgb, var(--tw-accent-2) 50%, transparent);
  --color-item-active-age: var(--tw-muted);
  --color-item-active-pointer: var(--tw-accent-2);
  --color-item-active-pointer-shadow: color-mix(in srgb, var(--tw-accent-2) 36%, transparent);
}