/* Lenss dark theme
   Light mode remains the existing Lenss visual language.
   Dark mode uses the approved neutral pair:
   canvas #121212 and elevated surface #1E1E1E.
*/

/* The public header remains available to signed-in users until a real workspace
   shell is active. Workspace navigation then becomes the sole navigation owner. */
body.lenss-workspace-shell > header[data-public-header],
body.lenss-workspace-shell > [data-public-menu-backdrop],
body.lenss-workspace-shell > [data-public-mobile-menu] {
    display: none !important;
}

/* Keep workspace navigation visually separated. Groups can still use native
   disclosure, but every destination reads as its own deliberate capsule rather
   than collapsing into one long undifferentiated rail. */
#lenss-workspace-sidebar nav > div,
#lenss-workspace-sidebar nav > details {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 1rem;
    background: rgba(255,255,255,.035);
    padding: .375rem;
}

#lenss-workspace-sidebar nav > p + div {
    margin-top: .5rem;
}

#lenss-workspace-sidebar nav > div + details,
#lenss-workspace-sidebar nav > details + details {
    margin-top: .75rem;
}

#lenss-workspace-sidebar nav a:not([aria-current="page"]) {
    border: 1px solid rgba(255,255,255,.055);
    background: rgba(255,255,255,.035);
}

#lenss-workspace-sidebar nav a:not([aria-current="page"]):hover {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.09);
}

/* The shared product shell predates the data marker used by the newer journey
   shell, so its labelled logo link receives the same white capsule treatment. */
#lenss-workspace-sidebar [aria-label="Open My Lenss"] {
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 1rem;
    background: #FFFFFF !important;
    padding: .5rem .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

html[data-lenss-theme="dark"] {
    color-scheme: dark;
    --lenss-dark-canvas: #121212;
    --lenss-dark-surface: #1E1E1E;
    --lenss-dark-surface-raised: #242424;
    --lenss-dark-border: rgba(255,255,255,.12);
    --lenss-dark-text: #FFFFFF;
    --lenss-dark-muted: #D1D5DB;
}

html[data-lenss-theme="dark"] body,
html[data-lenss-theme="dark"] main,
html[data-lenss-theme="dark"] .bg-canvas,
html[data-lenss-theme="dark"] .bg-slate-50,
html[data-lenss-theme="dark"] .bg-slate-100,
html[data-lenss-theme="dark"] .bg-gray-50,
html[data-lenss-theme="dark"] .bg-gray-100,
html[data-lenss-theme="dark"] .bg-lenss-50,
html[data-lenss-theme="dark"] .bg-lenss-100 {
    background-color: var(--lenss-dark-canvas) !important;
}

html[data-lenss-theme="dark"] #lenss-workspace-sidebar,
html[data-lenss-theme="dark"] footer,
html[data-lenss-theme="dark"] .bg-white,
html[data-lenss-theme="dark"] .bg-slate-50\/50,
html[data-lenss-theme="dark"] .bg-gray-50\/50,
html[data-lenss-theme="dark"] [class*="bg-white/"],
html[data-lenss-theme="dark"] section.bg-white,
html[data-lenss-theme="dark"] article.bg-white,
html[data-lenss-theme="dark"] aside.bg-white {
    background-color: var(--lenss-dark-surface) !important;
}

/* Light semantic utility colours become dark tinted surfaces rather than bright
   islands. This covers the public marketing pages and the same utilities used
   by the product workspace without requiring page-specific theme repair. */
html[data-lenss-theme="dark"] .bg-violet-50,
html[data-lenss-theme="dark"] .bg-purple-50 { background-color: rgba(124,58,237,.13) !important; }
html[data-lenss-theme="dark"] .bg-indigo-50,
html[data-lenss-theme="dark"] .bg-blue-50,
html[data-lenss-theme="dark"] .bg-sky-50 { background-color: rgba(59,130,246,.12) !important; }
html[data-lenss-theme="dark"] .bg-emerald-50,
html[data-lenss-theme="dark"] .bg-green-50,
html[data-lenss-theme="dark"] .bg-teal-50 { background-color: rgba(16,185,129,.12) !important; }
html[data-lenss-theme="dark"] .bg-cyan-50 { background-color: rgba(6,182,212,.12) !important; }
html[data-lenss-theme="dark"] .bg-orange-50,
html[data-lenss-theme="dark"] .bg-amber-50,
html[data-lenss-theme="dark"] .bg-yellow-50 { background-color: rgba(249,115,22,.12) !important; }
html[data-lenss-theme="dark"] .bg-red-50,
html[data-lenss-theme="dark"] .bg-rose-50 { background-color: rgba(239,68,68,.12) !important; }

/* Tailwind gradient utilities set custom properties rather than a normal
   background colour. Override their light stops in dark mode so hero sections
   genuinely invert instead of becoming a white gradient with white text. */
html[data-lenss-theme="dark"] .from-white { --tw-gradient-from: #1E1E1E var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(30 30 30 / 0) var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .via-white { --tw-gradient-to: rgb(30 30 30 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), #1E1E1E var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
html[data-lenss-theme="dark"] .to-white { --tw-gradient-to: #1E1E1E var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .from-lenss-50 { --tw-gradient-from: #171717 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(23 23 23 / 0) var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .to-lenss-50 { --tw-gradient-to: #171717 var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .from-violet-50,
html[data-lenss-theme="dark"] .from-purple-50 { --tw-gradient-from: #1b1623 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(27 22 35 / 0) var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .to-violet-50,
html[data-lenss-theme="dark"] .to-purple-50 { --tw-gradient-to: #1b1623 var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .from-emerald-50,
html[data-lenss-theme="dark"] .from-green-50 { --tw-gradient-from: #13201b var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(19 32 27 / 0) var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .to-emerald-50,
html[data-lenss-theme="dark"] .to-green-50 { --tw-gradient-to: #13201b var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .from-cyan-50,
html[data-lenss-theme="dark"] .from-sky-50,
html[data-lenss-theme="dark"] .from-blue-50 { --tw-gradient-from: #121d22 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(18 29 34 / 0) var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .to-cyan-50,
html[data-lenss-theme="dark"] .to-sky-50,
html[data-lenss-theme="dark"] .to-blue-50 { --tw-gradient-to: #121d22 var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .from-orange-50,
html[data-lenss-theme="dark"] .from-amber-50 { --tw-gradient-from: #211810 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(33 24 16 / 0) var(--tw-gradient-to-position) !important; }
html[data-lenss-theme="dark"] .to-orange-50,
html[data-lenss-theme="dark"] .to-amber-50 { --tw-gradient-to: #211810 var(--tw-gradient-to-position) !important; }

html[data-lenss-theme="dark"] .shadow,
html[data-lenss-theme="dark"] .shadow-sm,
html[data-lenss-theme="dark"] .shadow-md,
html[data-lenss-theme="dark"] .shadow-lg,
html[data-lenss-theme="dark"] .shadow-xl,
html[data-lenss-theme="dark"] .shadow-lenss {
    --tw-shadow-color: rgba(0,0,0,.45) !important;
}

html[data-lenss-theme="dark"] .text-intelligence,
html[data-lenss-theme="dark"] .text-lenss-navy,
html[data-lenss-theme="dark"] .text-slate-950,
html[data-lenss-theme="dark"] .text-slate-900,
html[data-lenss-theme="dark"] .text-slate-800,
html[data-lenss-theme="dark"] .text-slate-700,
html[data-lenss-theme="dark"] .text-gray-950,
html[data-lenss-theme="dark"] .text-gray-900,
html[data-lenss-theme="dark"] .text-gray-800,
html[data-lenss-theme="dark"] .text-gray-700 {
    color: var(--lenss-dark-text) !important;
}

html[data-lenss-theme="dark"] .text-slate-600,
html[data-lenss-theme="dark"] .text-slate-500,
html[data-lenss-theme="dark"] .text-slate-400,
html[data-lenss-theme="dark"] .text-gray-600,
html[data-lenss-theme="dark"] .text-gray-500,
html[data-lenss-theme="dark"] .text-gray-400 {
    color: var(--lenss-dark-muted) !important;
}

html[data-lenss-theme="dark"] .border-slate-100,
html[data-lenss-theme="dark"] .border-slate-200,
html[data-lenss-theme="dark"] .border-slate-300,
html[data-lenss-theme="dark"] .border-gray-100,
html[data-lenss-theme="dark"] .border-gray-200,
html[data-lenss-theme="dark"] .border-gray-300,
html[data-lenss-theme="dark"] [class*="border-intelligence/"] {
    border-color: var(--lenss-dark-border) !important;
}

html[data-lenss-theme="dark"] .border-violet-100,
html[data-lenss-theme="dark"] .border-violet-200,
html[data-lenss-theme="dark"] .border-indigo-100,
html[data-lenss-theme="dark"] .border-indigo-200,
html[data-lenss-theme="dark"] .border-blue-100,
html[data-lenss-theme="dark"] .border-blue-200,
html[data-lenss-theme="dark"] .border-emerald-100,
html[data-lenss-theme="dark"] .border-emerald-200,
html[data-lenss-theme="dark"] .border-orange-100,
html[data-lenss-theme="dark"] .border-orange-200,
html[data-lenss-theme="dark"] .border-amber-100,
html[data-lenss-theme="dark"] .border-amber-200,
html[data-lenss-theme="dark"] .border-red-100,
html[data-lenss-theme="dark"] .border-red-200 {
    border-color: var(--lenss-dark-border) !important;
}

html[data-lenss-theme="dark"] input,
html[data-lenss-theme="dark"] select,
html[data-lenss-theme="dark"] textarea {
    background-color: var(--lenss-dark-surface) !important;
    color: var(--lenss-dark-text) !important;
    border-color: rgba(255,255,255,.18) !important;
}

html[data-lenss-theme="dark"] input::placeholder,
html[data-lenss-theme="dark"] textarea::placeholder {
    color: #9CA3AF !important;
}

html[data-lenss-theme="dark"] option {
    background: var(--lenss-dark-surface);
    color: var(--lenss-dark-text);
}

html[data-lenss-theme="dark"] .bg-brand-soft { background-color: rgba(249,115,22,.18) !important; }
html[data-lenss-theme="dark"] .bg-discovery-soft { background-color: rgba(59,130,246,.16) !important; }
html[data-lenss-theme="dark"] .bg-reflection-soft { background-color: rgba(139,92,246,.16) !important; }
html[data-lenss-theme="dark"] .bg-confirmed-soft { background-color: rgba(16,185,129,.14) !important; }
html[data-lenss-theme="dark"] .bg-attention-soft { background-color: rgba(245,158,11,.14) !important; }
html[data-lenss-theme="dark"] .bg-danger-soft { background-color: rgba(239,68,68,.14) !important; }

html[data-lenss-theme="dark"] details,
html[data-lenss-theme="dark"] [role="dialog"] {
    border-color: var(--lenss-dark-border);
}

html[data-lenss-theme="dark"] header[data-public-header] {
    background-color: rgba(18,18,18,.96) !important;
    border-color: var(--lenss-dark-border) !important;
}

html[data-lenss-theme="dark"] header[data-public-header] nav[aria-label="Public navigation"] a[class*="border"] {
    background-color: var(--lenss-dark-surface-raised) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: var(--lenss-dark-muted) !important;
}

html[data-lenss-theme="dark"] header[data-public-header] nav[aria-label="Public navigation"] a[aria-current="page"] {
    background-color: rgba(249,115,22,.18) !important;
    border-color: rgba(249,115,22,.38) !important;
    color: #FDBA74 !important;
}

html[data-lenss-theme="dark"] [data-public-workspace-switcher] summary,
html[data-lenss-theme="dark"] [data-public-workspace-switcher] > div {
    background-color: var(--lenss-dark-surface) !important;
    border-color: var(--lenss-dark-border) !important;
}

html[data-lenss-theme="dark"] a:focus-visible,
html[data-lenss-theme="dark"] button:focus-visible,
html[data-lenss-theme="dark"] input:focus-visible,
html[data-lenss-theme="dark"] select:focus-visible,
html[data-lenss-theme="dark"] textarea:focus-visible {
    outline-color: #F97316;
}

[data-lenss-dark-toggle] {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .8rem;
    border-radius: .75rem;
    border: 1px solid rgba(148,163,184,.28);
    background: transparent;
    color: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
}

[data-lenss-dark-toggle]:hover { background: rgba(148,163,184,.10); }

[data-lenss-dark-toggle] .lenss-theme-switch {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 1.35rem;
    border-radius: 999px;
    padding: .15rem;
    background: #CBD5E1;
    transition: background-color .16s ease;
}

[data-lenss-dark-toggle] .lenss-theme-knob {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0,0,0,.24);
    transform: translateX(0);
    transition: transform .16s ease;
}

html[data-lenss-theme="dark"] [data-lenss-dark-toggle] .lenss-theme-switch { background: #F97316; }
html[data-lenss-theme="dark"] [data-lenss-dark-toggle] .lenss-theme-knob { transform: translateX(1.05rem); }

/* Complete shell and legacy-surface coverage. Several workspace views use
   translucent Tailwind canvas utilities, tables and compact status tones that
   need explicit dark equivalents because they are not normal background
   colour declarations. */
html[data-lenss-theme="dark"] [data-workspace-utility-bar],
html[data-lenss-theme="dark"] [data-workspace-mobile-navigation],
html[data-lenss-theme="dark"] .bg-canvas\/95,
html[data-lenss-theme="dark"] .bg-canvas\/90,
html[data-lenss-theme="dark"] .bg-canvas\/80,
html[data-lenss-theme="dark"] .bg-canvas\/75,
html[data-lenss-theme="dark"] .bg-canvas\/50 {
    background-color: rgba(18,18,18,.96) !important;
    border-color: var(--lenss-dark-border) !important;
}

html[data-lenss-theme="dark"] table,
html[data-lenss-theme="dark"] thead,
html[data-lenss-theme="dark"] tbody,
html[data-lenss-theme="dark"] tr,
html[data-lenss-theme="dark"] [role="menu"],
html[data-lenss-theme="dark"] [role="listbox"] {
    border-color: var(--lenss-dark-border) !important;
}

html[data-lenss-theme="dark"] .bg-slate-200,
html[data-lenss-theme="dark"] .bg-gray-200 {
    background-color: var(--lenss-dark-surface-raised) !important;
}

html[data-lenss-theme="dark"] .bg-blue-100,
html[data-lenss-theme="dark"] .bg-blue-200,
html[data-lenss-theme="dark"] .bg-indigo-100,
html[data-lenss-theme="dark"] .bg-violet-100,
html[data-lenss-theme="dark"] .bg-purple-100 { background-color: rgba(99,102,241,.18) !important; }
html[data-lenss-theme="dark"] .bg-emerald-100,
html[data-lenss-theme="dark"] .bg-emerald-200,
html[data-lenss-theme="dark"] .bg-green-100,
html[data-lenss-theme="dark"] .bg-teal-100 { background-color: rgba(16,185,129,.17) !important; }
html[data-lenss-theme="dark"] .bg-orange-100,
html[data-lenss-theme="dark"] .bg-orange-200,
html[data-lenss-theme="dark"] .bg-amber-100,
html[data-lenss-theme="dark"] .bg-amber-200,
html[data-lenss-theme="dark"] .bg-yellow-100 { background-color: rgba(249,115,22,.18) !important; }
html[data-lenss-theme="dark"] .bg-red-100,
html[data-lenss-theme="dark"] .bg-red-200,
html[data-lenss-theme="dark"] .bg-rose-100 { background-color: rgba(239,68,68,.17) !important; }

/* The Lenss wordmark contains dark artwork, so dark shells deliberately keep
   one crisp white capsule behind it instead of allowing global surface rules
   to make the logo disappear. */
html[data-lenss-theme="dark"] [data-lenss-logo-capsule],
html[data-lenss-theme="dark"] #lenss-workspace-sidebar [aria-label="Open My Lenss"] {
    background: #FFFFFF !important;
    border-color: rgba(255,255,255,.70) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.32) !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-lenss-dark-toggle],
    [data-lenss-dark-toggle] * { transition: none !important; }
}