/* Signed-in Retinere follows the device's light/dark appearance. This palette
   is deliberately scoped to .app-theme: the public marketing layout never
   receives that marker and remains light-only. Mapping the existing neutral
   utilities here also gives old and new app screens one shared theme path. */
body.app-theme {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  body.app-theme {
    /* Charcoal is the active experiment: neutral enough to disappear behind
       the notes while retaining several readable levels of surface depth. */
    --app-dark-canvas: #09090b;
    --app-dark-surface: #18181b;
    --app-dark-soft: #27272a;
    --app-dark-raised: #3f3f46;
    --app-dark-action: #52525b;
    --app-dark-hover: #71717a;
    --app-dark-body-text: #e4e4e7;
    --app-dark-text: #fafafa;
    --app-dark-text-secondary: #d4d4d8;
    --app-dark-text-muted: #a1a1aa;
    --app-dark-border: #3f3f46;
    --app-dark-border-strong: #52525b;

    color-scheme: dark;
    background-color: var(--app-dark-canvas);
    color: var(--app-dark-body-text);
  }

  /* Preserve the original distinctive blue-slate experiment as a complete
     alternate palette. A future preference only needs to set this attribute. */
  body.app-theme[data-app-dark-palette="slate"] {
    --app-dark-canvas: #0f172a;
    --app-dark-surface: #111827;
    --app-dark-soft: #1e293b;
    --app-dark-raised: #334155;
    --app-dark-action: #475569;
    --app-dark-hover: #64748b;
    --app-dark-body-text: #e2e8f0;
    --app-dark-text: #f8fafc;
    --app-dark-text-secondary: #cbd5e1;
    --app-dark-text-muted: #94a3b8;
    --app-dark-border: #334155;
    --app-dark-border-strong: #475569;
  }

  /* App canvas and elevated surfaces. */
  body.app-theme .app-chrome-slate,
  body.app-theme .app-collections-header,
  body.app-theme .app-page-header-band,
  body.app-theme .bg-white {
    background-color: var(--app-dark-surface);
  }

  body.app-theme .app-navigation-header,
  body.app-theme .app-chrome-slate,
  body.app-theme .app-collections-header,
  body.app-theme .app-page-header-band {
    border-color: var(--app-dark-soft);
  }

  body.app-theme .app-chrome-wordmark-invert {
    filter: invert(1);
  }

  body.app-theme .bg-gray-50,
  body.app-theme .bg-slate-50,
  body.app-theme [class~="bg-gray-50/60"],
  body.app-theme [class~="bg-gray-50/80"],
  body.app-theme [class~="bg-gray-50/90"],
  body.app-theme [class~="bg-slate-50/70"],
  body.app-theme [class~="bg-slate-50/80"] {
    background-color: var(--app-dark-soft);
  }

  body.app-theme .bg-gray-100,
  body.app-theme .bg-slate-100,
  body.app-theme .bg-gray-200,
  body.app-theme .bg-slate-200,
  body.app-theme .bg-gray-300,
  body.app-theme [class~="bg-white/60"],
  body.app-theme [class~="bg-white/70"],
  body.app-theme [class~="bg-white/80"],
  body.app-theme [class~="bg-white/90"] {
    background-color: var(--app-dark-raised);
  }

  body.app-theme .bg-gray-800,
  body.app-theme .bg-gray-900,
  body.app-theme .bg-gray-950,
  body.app-theme .bg-slate-800,
  body.app-theme .bg-slate-900,
  body.app-theme .bg-slate-950 {
    background-color: var(--app-dark-action);
  }

  /* Neutral typography keeps the same hierarchy without pure-white glare. */
  body.app-theme .text-black,
  body.app-theme .text-gray-950,
  body.app-theme .text-gray-900,
  body.app-theme .text-gray-800,
  body.app-theme .text-slate-950,
  body.app-theme .text-slate-900,
  body.app-theme .text-slate-800 {
    color: var(--app-dark-text);
  }

  body.app-theme .text-gray-700,
  body.app-theme .text-gray-600,
  body.app-theme .text-slate-700,
  body.app-theme .text-slate-600 {
    color: var(--app-dark-text-secondary);
  }

  body.app-theme .text-gray-500,
  body.app-theme .text-gray-400,
  body.app-theme .text-gray-300,
  body.app-theme .text-slate-500,
  body.app-theme .text-slate-400,
  body.app-theme .text-slate-300 {
    color: var(--app-dark-text-muted);
  }

  /* Rules and input edges are visible but quieter than content. */
  body.app-theme .border-white,
  body.app-theme .border-gray-100,
  body.app-theme .border-gray-200,
  body.app-theme .border-slate-100,
  body.app-theme .border-slate-200 {
    border-color: var(--app-dark-border);
  }

  body.app-theme .divide-gray-100 > :not(:last-child),
  body.app-theme .divide-gray-200 > :not(:last-child),
  body.app-theme .divide-slate-100 > :not(:last-child),
  body.app-theme .divide-slate-200 > :not(:last-child) {
    border-color: var(--app-dark-border);
  }

  body.app-theme .border-gray-300,
  body.app-theme .border-gray-400,
  body.app-theme .border-slate-300,
  body.app-theme .border-slate-400,
  body.app-theme [class~="border-slate-300/70"] {
    border-color: var(--app-dark-border-strong);
  }

  /* Existing hover utilities need dark counterparts because their generated
     light colors otherwise win as soon as the pointer enters a control. */
  body.app-theme [class~="hover:bg-white"]:hover,
  body.app-theme [class~="hover:bg-white/70"]:hover,
  body.app-theme [class~="hover:bg-gray-50"]:hover,
  body.app-theme [class~="hover:bg-slate-50"]:hover,
  body.app-theme [class~="hover:bg-gray-100"]:hover,
  body.app-theme [class~="hover:bg-slate-100"]:hover {
    background-color: var(--app-dark-raised);
  }

  body.app-theme [class~="hover:bg-gray-800"]:hover,
  body.app-theme [class~="hover:bg-gray-950"]:hover,
  body.app-theme [class~="hover:bg-slate-700"]:hover,
  body.app-theme [class~="hover:bg-slate-900"]:hover,
  body.app-theme [class~="hover:bg-black"]:hover {
    background-color: var(--app-dark-hover);
  }

  body.app-theme [class~="hover:text-black"]:hover,
  body.app-theme [class~="hover:text-gray-700"]:hover,
  body.app-theme [class~="hover:text-gray-800"]:hover,
  body.app-theme [class~="hover:text-gray-900"]:hover,
  body.app-theme [class~="hover:text-gray-950"]:hover,
  body.app-theme [class~="hover:text-slate-700"]:hover,
  body.app-theme [class~="hover:text-slate-900"]:hover,
  body.app-theme [class~="hover:text-slate-950"]:hover {
    color: var(--app-dark-text);
  }

  /* Account identity is useful context, not a primary action. Keep its pill
     quieter than raised cards and the Ready/New note controls beside it. */
  body.app-theme .app-account-pill {
    border-color: var(--app-dark-border);
    background-color: var(--app-dark-soft);
    color: var(--app-dark-text-secondary);
  }

  /* Current navigation and selected notebook cards should remain distinct from
     the surrounding rails after white surfaces become dark surfaces. */
  body.app-theme [aria-current="page"],
  body.app-theme [data-library-notebook-id].bg-slate-50 {
    background-color: var(--app-dark-soft);
  }

  /* A folder row reserves space for its hidden actions control. Colour the
     whole selected row so that slot cannot expose the darker parent surface. */
  body.app-theme [data-library-folder-active="true"] {
    background-color: var(--app-dark-soft);
  }

  /* Status washes retain their meaning without becoming luminous panels. */
  body.app-theme .bg-red-50,
  body.app-theme .bg-red-100,
  body.app-theme [class~="bg-red-50/90"],
  body.app-theme [class~="bg-red-50/95"],
  body.app-theme .bg-rose-50,
  body.app-theme .bg-rose-100 {
    background-color: #4c1d24;
  }

  body.app-theme .bg-amber-50,
  body.app-theme .bg-amber-100,
  body.app-theme .bg-yellow-50,
  body.app-theme [class~="bg-orange-50/50"],
  body.app-theme .bg-orange-100,
  body.app-theme .bg-orange-200 {
    background-color: #422d12;
  }

  body.app-theme .bg-emerald-50,
  body.app-theme [class~="bg-green-50/95"] {
    background-color: #12352f;
  }

  body.app-theme .bg-sky-50,
  body.app-theme [class~="bg-indigo-50/40"] {
    background-color: #172554;
  }

  body.app-theme .text-red-600,
  body.app-theme .text-red-700,
  body.app-theme .text-red-800,
  body.app-theme .text-red-900,
  body.app-theme .text-rose-700,
  body.app-theme .text-rose-800,
  body.app-theme .text-rose-900,
  body.app-theme .text-rose-950 {
    color: #fda4af;
  }

  body.app-theme .text-amber-600,
  body.app-theme .text-amber-700,
  body.app-theme .text-amber-800,
  body.app-theme .text-amber-900,
  body.app-theme .text-amber-950,
  body.app-theme [class~="text-amber-900/70"],
  body.app-theme [class~="text-amber-900/80"],
  body.app-theme [class~="text-amber-900/85"],
  body.app-theme .text-orange-700,
  body.app-theme .text-orange-800,
  body.app-theme .text-orange-900,
  body.app-theme .text-yellow-900 {
    color: #fcd34d;
  }

  body.app-theme .text-emerald-700,
  body.app-theme .text-emerald-800,
  body.app-theme .text-green-900 {
    color: #6ee7b7;
  }

  body.app-theme .text-sky-700,
  body.app-theme .text-blue-700 {
    color: #93c5fd;
  }

  body.app-theme .border-red-200,
  body.app-theme .border-rose-200 {
    border-color: #9f1239;
  }

  body.app-theme .border-amber-200,
  body.app-theme .border-amber-300,
  body.app-theme .border-orange-100,
  body.app-theme .border-orange-200,
  body.app-theme .border-yellow-200 {
    border-color: #92400e;
  }

  body.app-theme .border-emerald-200,
  body.app-theme .border-green-200 {
    border-color: #047857;
  }

  body.app-theme .note-textarea-hover:hover {
    background-color: var(--app-dark-soft);
  }

  /* Neutral review stems use an inline light-mode fallback. Override only the
     gray state here; red and yellow review-status stems retain their urgency. */
  body.app-theme .review-bar-flag__stem.bg-gray-200 {
    background-color: var(--app-dark-hover) !important;
  }

  body.app-theme .peer:checked + .review-toggle,
  body.app-theme .review-toggle.is-checked {
    border-color: var(--app-dark-text-muted);
    background-color: var(--app-dark-hover);
  }

  body.app-theme [data-note-drop-notebook-id][data-note-drop-active="true"],
  body.app-theme [data-note-drop-system-slug][data-note-drop-active="true"] {
    border-color: #818cf8;
    background: #312e81;
  }

  body.app-theme [data-library-folder-drop-id][data-library-folder-drop-active="true"],
  body.app-theme [data-note-drop-system-slug][data-library-folder-drop-active="true"] {
    background: var(--app-dark-soft);
    box-shadow: inset 0 0 0 1px var(--app-dark-hover);
  }
}