/* Canonical day-part theme tokens — shared across all 2x4m subdomains */

:root,
[data-theme='day'] {
  --cream: #faf8f5;
  --ink: #1a1410;
  --border: var(--ink);
  --border-shadow: var(--ink);
  --sticker-muted: #4a433d;
  --sticker-subtle: #5c534c;
  --surface: #ffffff;
  --surface-muted: #faf8f5;
  --dot-opacity: 0.06;
  --nav-bg: rgba(250, 248, 245, 0.92);
  --status-available: #dcfce7;
  --status-busy: #fef3c7;
  --status-offline: #fee2e2;
  --search-ring: rgba(124, 58, 237, 0.3);
}

[data-theme='dawn'] {
  --cream: #fdf6ee;
  --ink: #2c241c;
  --border: var(--ink);
  --border-shadow: var(--ink);
  --sticker-muted: #5c4f42;
  --sticker-subtle: #6d5f52;
  --surface: #fffcf8;
  --surface-muted: #faf3ea;
  --dot-opacity: 0.05;
  --nav-bg: rgba(253, 246, 238, 0.92);
  --status-available: #ecfdf5;
  --status-busy: #fef9c3;
  --status-offline: #ffe4e6;
  --search-ring: rgba(251, 146, 60, 0.35);
}

[data-theme='dusk'] {
  --cream: #f3ebe0;
  --ink: #1f1814;
  --border: var(--ink);
  --border-shadow: var(--ink);
  --sticker-muted: #524840;
  --sticker-subtle: #635a52;
  --surface: #faf5ed;
  --surface-muted: #ede4d8;
  --dot-opacity: 0.07;
  --nav-bg: rgba(243, 235, 224, 0.92);
  --status-available: #dcfce7;
  --status-busy: #fde68a;
  --status-offline: #fecdd3;
  --search-ring: rgba(217, 119, 6, 0.35);
}

[data-theme='night'] {
  --cream: #0f0d0b;
  --ink: #f5f0ea;
  --border: #4a433d;
  --border-shadow: #322e2a;
  --sticker-muted: #d4c8b8;
  --sticker-subtle: #b8a99a;
  --surface: #1a1613;
  --surface-muted: #14110f;
  --dot-opacity: 0.12;
  --nav-bg: rgba(15, 13, 11, 0.92);
  --status-available: #14532d;
  --status-busy: #713f12;
  --status-offline: #7f1d1d;
  --search-ring: rgba(245, 158, 11, 0.35);
}

.day-night-badge {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--border);
  box-shadow: 3px 3px 0 0 var(--border-shadow);
  line-height: 1;
  max-height: 2rem;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

/* Sized in CSS — h-3.5/w-3.5 from @2x4m/ui are not always in app Tailwind bundles */
.day-night-badge svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.day-night-menu button svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.day-night-badge:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 0 var(--border-shadow);
  background: var(--ink);
  color: var(--cream);
}

.day-night-menu {
  border: 3px solid var(--border);
  box-shadow: 6px 6px 0 0 var(--border-shadow);
  background: var(--surface);
}