phokus/src/index.css

@import "tailwindcss";

@custom-variant light-theme (&:is(html[data-theme="subtle-light"] *));

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--color-gray-950);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="conventional-dark"] {
  --color-gray-950: #1f1f1f;
  --color-gray-900: #252525;
  --color-gray-800: #303030;
  --color-gray-700: #444444;
  --color-gray-600: #666666;
  --color-gray-500: #858585;
  --color-gray-400: #a3a3a3;
  --color-gray-300: #c4c4c4;
  --color-gray-200: #dddddd;
  --color-gray-100: #eeeeee;
  background: #1f1f1f;
}

html[data-theme="subtle-light"] {
  --color-white: #18202c;
  --color-gray-950: #e9e7e2;
  --color-gray-900: #dedbd4;
  --color-gray-800: #cfcbc3;
  --color-gray-700: #aea99f;
  --color-gray-600: #817b72;
  --color-gray-500: #655f57;
  --color-gray-400: #514b44;
  --color-gray-300: #403b35;
  --color-gray-200: #302c28;
  --color-gray-100: #24211e;
  /* Pastel accent shades are tuned for dark UIs and wash out on the light
     chrome (e.g. "Update check failed" in amber). Darken the ones used as
     coloured text/icons so they stay readable. Media surfaces reset these to
     the bright originals below, so on-photo overlays keep their signal colours.
     Remapping the variable (not the utility) also covers opacity variants such
     as text-amber-300/90. */
  --color-amber-200: #b45309;
  --color-amber-300: #b45309;
  --color-amber-400: #b45309;
  --color-red-200: #b91c1c;
  --color-red-300: #b91c1c;
  --color-red-400: #b91c1c;
  --color-rose-300: #be123c;
  --color-rose-400: #be123c;
  --color-emerald-200: #047857;
  --color-emerald-300: #047857;
  --color-emerald-400: #047857;
  --color-sky-300: #0369a1;
  --color-blue-300: #1d4ed8;
  --color-blue-400: #1d4ed8;
  --color-violet-300: #6d28d9;
  --color-violet-400: #6d28d9;
  background: #e9e7e2;
}

html[data-theme="subtle-light"] .media-dark-surface {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-950: #030712;
  --color-gray-900: #111827;
  --color-gray-800: #1f2937;
  --color-gray-700: #374151;
  --color-gray-600: #4b5563;
  --color-gray-500: #6b7280;
  --color-gray-400: #9ca3af;
  --color-gray-300: #d1d5db;
  --color-gray-200: #e5e7eb;
  --color-gray-100: #f3f4f6;
  /* Restore the bright accent originals the light theme darkened, so coloured
     overlays on photos/video (ratings, failed badges, the lightbox region tool)
     keep their signal colours instead of going dark-on-dark. */
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-rose-400: oklch(71.2% 0.194 13.428);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-400: oklch(76.5% 0.177 163.223);
  --color-sky-300: oklch(82.8% 0.111 230.318);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-violet-300: oklch(81.1% 0.111 293.571);
  --color-violet-400: oklch(70.2% 0.183 293.541);
}

/* The lightbox keeps its dark canvas + backdrop (via .media-dark-surface on the
   root), but the metadata panel is chrome and should follow the active theme.
   In subtle-light it lives inside the dark-surface root, so re-light it here by
   remapping the palette on the panel itself. Tailwind v4 resolves every colour
   utility through a --color-* variable, so remapping the variables re-themes the
   whole subtree — including accents — without a single !important. */
html[data-theme="subtle-light"] .lightbox-panel {
  --color-white: #18202c;
  --color-gray-950: #e9e7e2;
  --color-gray-900: #dedbd4;
  --color-gray-800: #cfcbc3;
  --color-gray-700: #aea99f;
  --color-gray-600: #817b72;
  --color-gray-500: #655f57;
  --color-gray-400: #514b44;
  --color-gray-300: #403b35;
  --color-gray-200: #302c28;
  --color-gray-100: #24211e;
  /* Pastel accents are tuned for a dark panel; darken them for the light one. */
  --color-amber-300: #b45309;
  --color-amber-400: #b45309;
  --color-sky-300: #0369a1;
  --color-emerald-300: #047857;
  --color-rose-300: #be123c;
  --color-rose-400: #be123c;
  --color-red-300: #b91c1c;
  --color-violet-300: #6d28d9;
  --color-violet-400: #6d28d9;
}

html[data-theme="subtle-light"] .explore-view {
  background:
    radial-gradient(ellipse at top, rgb(59 130 246 / 0.08), transparent 48%),
    radial-gradient(ellipse at 80% 75%, rgb(16 185 129 / 0.07), transparent 42%),
    #f4f2ea !important;
  color: #1f2937 !important;
}

html[data-theme="subtle-light"] .explore-header {
  background: #f4f2ea !important;
  border-color: #d8d2c7 !important;
}

html[data-theme="subtle-light"] .explore-title {
  color: #111827 !important;
}

html[data-theme="subtle-light"] .explore-subtitle,
html[data-theme="subtle-light"] .explore-empty {
  color: #7a746b !important;
}

html[data-theme="subtle-light"] .explore-mode-toggle {
  background: #ece8dd !important;
  border-color: #d0c8ba !important;
}

html[data-theme="subtle-light"] .explore-mode-button {
  background: transparent !important;
  color: #4b5563 !important;
}

html[data-theme="subtle-light"] .explore-mode-button:hover {
  background: #e0dbcf !important;
  color: #111827 !important;
}

html[data-theme="subtle-light"] .explore-mode-button.bg-white\/10 {
  background: #d8d4ca !important;
  color: #111827 !important;
}

html[data-theme="subtle-light"] .explore-cluster-grid {
  background-image: radial-gradient(circle, rgb(31 41 55 / 0.18) 1px, transparent 1px) !important;
  opacity: 0.16 !important;
}

html[data-theme="subtle-light"] .explore-cluster-card {
  background: #fbfaf6 !important;
  border-color: #d8d2c7 !important;
  box-shadow: 0 14px 36px rgb(28 25 23 / 0.18) !important;
}

html[data-theme="subtle-light"] .explore-cluster-card:hover {
  box-shadow: 0 18px 44px rgb(28 25 23 / 0.22) !important;
}

html[data-theme="subtle-light"] .explore-cluster-overlay {
  /* A cream wash over the photo read as a faded, foggy haze. Use a gentle dark
     scrim instead — the same natural "photo caption" vignette the dark theme
     uses — with light text on top (label/count rules below). */
  background: linear-gradient(
    to top,
    rgb(17 18 22 / 0.82),
    rgb(17 18 22 / 0.34) 38%,
    transparent 66%
  ) !important;
}

html[data-theme="subtle-light"] .explore-cluster-label {
  color: rgb(255 255 255 / 0.62) !important;
}

html[data-theme="subtle-light"] .explore-cluster-count {
  color: #ffffff !important;
}

html[data-theme="subtle-light"] .explore-tag-word::before {
  background: radial-gradient(
    ellipse at center,
    rgba(60, 50, 30, 0.13),
    rgba(60, 50, 30, 0.05) 46%,
    rgba(60, 50, 30, 0) 72%
  ) !important;
}

html[data-theme="subtle-light"] .explore-spinner {
  border-color: rgb(17 24 39 / 0.18) !important;
  border-top-color: rgb(17 24 39 / 0.55) !important;
}

html[data-theme="subtle-light"] .tag-manager-header {
  background: rgb(244 242 234 / 0.72) !important;
  border-color: #d8d2c7 !important;
}

html[data-theme="subtle-light"] .tag-manager-stat {
  background: rgb(31 41 55 / 0.06) !important;
  color: #5f5a52 !important;
}

html[data-theme="subtle-light"] .tag-manager-match {
  background: rgb(37 99 235 / 0.12) !important;
  color: #1d4ed8 !important;
}

html[data-theme="subtle-light"] .tag-manager-help,
html[data-theme="subtle-light"] .tag-manager-empty {
  color: #6f6a61 !important;
}

html[data-theme="subtle-light"] .tag-manager-filter {
  background: #fbfaf6 !important;
  border-color: #cfc7b8 !important;
  color: #111827 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.64) !important;
}

html[data-theme="subtle-light"] .tag-manager-filter::placeholder {
  color: #8a8378 !important;
}

html[data-theme="subtle-light"] .tag-manager-filter:focus {
  background: #fffdfa !important;
  border-color: #7aa2e3 !important;
}

html[data-theme="subtle-light"] .tag-manager-clear {
  color: #6b645a !important;
}

html[data-theme="subtle-light"] .tag-manager-clear:hover {
  background: rgb(31 41 55 / 0.08) !important;
  color: #111827 !important;
}

html[data-theme="subtle-light"] .tag-manager-tile {
  background: rgb(251 250 246 / 0.5) !important;
  border-color: rgb(151 141 126 / 0.22) !important;
}

html[data-theme="subtle-light"] .tag-manager-tile:hover,
html[data-theme="subtle-light"] .tag-manager-tile:focus-within {
  background: rgb(255 253 250 / 0.74) !important;
  border-color: rgb(151 141 126 / 0.36) !important;
}

html[data-theme="subtle-light"] .tag-manager-name {
  color: #1f2937 !important;
}

html[data-theme="subtle-light"] .tag-manager-name:hover {
  color: #111827 !important;
}

html[data-theme="subtle-light"] .tag-manager-count {
  background: rgb(31 41 55 / 0.07) !important;
  color: #6b645a !important;
}

html[data-theme="subtle-light"] .tag-manager-edit-input {
  background: #fffdfa !important;
  color: #111827 !important;
}

html[data-theme="subtle-light"] .tag-manager-secondary,
html[data-theme="subtle-light"] .tag-manager-action {
  background: rgb(255 253 250 / 0.92) !important;
  border-color: rgb(31 41 55 / 0.12) !important;
  color: #5f5a52 !important;
}

html[data-theme="subtle-light"] .tag-manager-secondary:hover,
html[data-theme="subtle-light"] .tag-manager-action:hover {
  background: rgb(31 41 55 / 0.06) !important;
  color: #111827 !important;
}

html[data-theme="subtle-light"] .tag-manager-save {
  color: #1d4ed8 !important;
}

html[data-theme="subtle-light"] .tag-manager-danger,
html[data-theme="subtle-light"] .tag-manager-action-danger:hover {
  color: #b91c1c !important;
}

html[data-theme="subtle-light"] .tag-manager-empty {
  background: rgb(251 250 246 / 0.42) !important;
  border-color: #d8d2c7 !important;
}

html[data-theme="subtle-light"] .feature-scope-trigger {
  background: #f8f6ef !important;
  border-color: #d0c8ba !important;
  color: #4b5563 !important;
}

html[data-theme="subtle-light"] .feature-scope-trigger:hover,
html[data-theme="subtle-light"] .feature-scope-dropdown:has(.feature-scope-menu) .feature-scope-trigger {
  background: #ece8dd !important;
  border-color: #bfb6a7 !important;
  color: #111827 !important;
}

html[data-theme="subtle-light"] .feature-scope-menu {
  background: #fbfaf6 !important;
  border-color: #d0c8ba !important;
  color: #1f2937 !important;
  box-shadow: 0 18px 44px rgb(28 25 23 / 0.2) !important;
}

html[data-theme="subtle-light"] .feature-scope-option {
  color: #4b5563 !important;
}

html[data-theme="subtle-light"] .feature-scope-option:hover {
  background: #ece8dd !important;
  color: #111827 !important;
}

html[data-theme="subtle-light"] .feature-scope-option.bg-white\/6 {
  background: #d8d4ca !important;
  color: #111827 !important;
}

@media (prefers-reduced-motion: reduce) {
  .explore-cluster-card,
  .explore-cluster-card img {
    transition-duration: 0.01ms !important;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-white, #fff) 12%, transparent);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-white, #fff) 22%, transparent);
}