/**
 * INUKA Leader Platform - Shared Styles
 * Design System: Emerald/Dark theme with Glassmorphism
 */

/* ===== GOOGLE FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ===== BASE STYLES ===== */
html {
    scroll-behavior: smooth;
}

html.dark {
    color-scheme: dark;
}

html.light {
    color-scheme: light;
    /* Override all CSS custom properties for light mode */
    --color-background: #fafdfb;
    --color-surface: #f0f7f4;
    --color-surface-dim: #e8f2ed;
    --color-surface-container: #edf5f0;
    --color-surface-container-low: #f5faf5;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-high: #e3ede7;
    --color-surface-container-highest: #d6e9de;
    --color-on-background: #1a2e28;
    --color-on-surface: #1a2e28;
    --color-on-surface-variant: #4a635a;
    --color-outline: #5c7a6f;
    --color-outline-variant: #aebfb8;
    /* primary teal stays darker for light mode readability */
    --color-primary: #006b5f;
    --color-primary-container: #a7f1df;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #002019;
    /* secondary */
    --color-secondary: #2d6b5f;
    --color-secondary-container: #b4e0d6;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #002019;
    /* tertiary gold adjusted for light */
    --color-tertiary: #b8920d;
    --color-tertiary-container: #ffe08c;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #261900;
    /* error */
    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;
    --color-on-error: #ffffff;
    --color-on-error-container: #410002;
    /* surface variants */
    --color-surface-bright: #c5d8ce;
    --color-surface-variant: #dbe5de;
    --color-inverse-surface: #d6e6e2;
    --color-inverse-on-surface: #253330;
}

html.light body {
    background-color: #fafdfb;
    color: #1a2e28;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: #081614;
    color: #d6e6e2;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== GLASSMORPHISM COMPONENTS ===== */

/* Glass Panel - Primary container style */
.glass-panel {
    background: rgba(42, 55, 53, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-panel-hover:hover {
    background: rgba(42, 55, 53, 0.8);
}

/* Glass Card - For smaller elements */
.glass-card {
    background: rgba(21, 34, 32, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Glass Nav - For navigation elements */
.glass-nav {
    background: rgba(4, 16, 14, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ===== MATERIAL ICONS ===== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    font-family: 'Material Symbols Outlined', sans-serif;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===== TEXT EFFECTS ===== */

/* Text Glow - Primary color */
.text-glow {
    text-shadow: 0 0 15px rgba(139, 212, 195, 0.3);
}

/* Text Glow - Gold */
.text-glow-gold {
    text-shadow: 0 0 15px rgba(234, 195, 73, 0.4);
}

/* Brand text styling */
.brand-text {
    font-family: 'Newsreader', serif;
    font-style: italic;
    color: #d6e6e2;
}

/* Label text styling */
.label-text {
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* ===== UTILITY CLASSES ===== */

/* Selection color */
::selection {
    background-color: rgba(139, 212, 195, 0.3);
    color: #d6e6e2;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: #081614;
}

::-webkit-scrollbar-thumb {
    background: #1f2d2a;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2a3735;
}

/* Gradient backgrounds */
.gradient-primary {
    background: linear-gradient(135deg, #005c4f 0%, #8bd4c3 100%);
}

.gradient-gold {
    background: linear-gradient(135deg, #cca830 0%, #eac349 100%);
}

/* Glow effects */
.glow-primary {
    box-shadow: 0 0 30px rgba(139, 212, 195, 0.3);
}

.glow-gold {
    box-shadow: 0 0 20px rgba(234, 195, 73, 0.15);
}

/* Curator glow - for decorative elements */
.curator-glow {
    background: radial-gradient(circle at center, rgba(0, 92, 79, 0.3) 0%, transparent 70%);
}

/* Vignette effect */
.vignette {
    box-shadow: inset 0 0 100px rgba(8, 22, 20, 0.8);
}

/* ===== NAVIGATION STYLES ===== */

/* Nav item base */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.nav-item {
    background: rgb(8,22,20);
    border: 1px solid rgba(255,255,255,0.08);
}
.nav-item:hover {
    background-color: rgba(18, 62, 44, 0.95);
    border-color: rgba(139, 212, 195, 0.25);
    color: #d6e6e2;
}

/* Active nav item */
.nav-item-active {
    background-color: rgba(38, 78, 67, 0.5);
    color: #eac349;
}

.nav-item-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Top nav link */
.nav-link {
    position: relative;
    color: rgba(214, 230, 226, 0.7);
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #eac349;
}

.nav-link-active {
    color: #eac349;
    border-bottom: 2px solid #eac349;
    padding-bottom: 0.25rem;
}

/* ===== BUTTON STYLES ===== */

/* Primary button */
.btn-primary {
    background: linear-gradient(145deg, #1d7a6a, #005c4f);
    color: #d6e6e2;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    box-shadow:
        0 8px 24px rgba(0,92,79,0.45),
        0 3px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -2px 0 rgba(0,0,0,0.25);
}
.btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #228c7b, #006b5d);
    box-shadow:
        0 14px 36px rgba(0,92,79,0.55),
        0 5px 12px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -2px 0 rgba(0,0,0,0.25);
}
.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0,92,79,0.3), inset 0 3px 6px rgba(0,0,0,0.25);
}

/* Secondary button */
.btn-secondary {
    background: linear-gradient(145deg, rgba(26,42,38,0.8), rgba(14,24,22,0.9));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #d6e6e2;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    box-shadow:
        0 6px 18px rgba(0,0,0,0.38),
        0 2px 6px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.22);
}
.btn-secondary:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, rgba(30,50,44,0.92), rgba(18,30,27,0.96));
    box-shadow:
        0 10px 28px rgba(0,0,0,0.45),
        0 4px 10px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.25);
}

/* Gold accent button */
.btn-gold {
    background: linear-gradient(145deg, #f0c93a, #cca830);
    color: #3c2f00;
    padding: 1rem 2.5rem;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
    border: none;
    cursor: pointer;
    box-shadow:
        0 8px 24px rgba(204,168,48,0.42),
        0 3px 8px rgba(0,0,0,0.26),
        inset 0 1px 0 rgba(255,255,255,0.42),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 36px rgba(234,195,73,0.52),
        0 5px 12px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -2px 0 rgba(0,0,0,0.15);
}
.btn-gold:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(204,168,48,0.3), inset 0 3px 6px rgba(0,0,0,0.15);
}

/* ===== TABLE STYLES ===== */

.table-row-hover:hover {
    background-color: rgba(21, 34, 32, 0.5);
}

/* ===== UTILITY ANIMATIONS ===== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInFromRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-in {
    animation: slideInFromRight 0.3s ease-out;
}

/* ===== FOCUS STATES ===== */

*:focus-visible {
    outline: 2px solid #8bd4c3;
    outline-offset: 2px;
}

/* ===== UX-7: SKIP LINK ===== */
/* Injected by nav-loader.js as the first focusable element. Visually hidden
   until it receives keyboard focus, then slides into view at the top-left. */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transform: translateY(-150%);
    padding: 0.75rem 1.25rem;
    background: #04100e;
    color: #8bd4c3;
    border: 1px solid #8bd4c3;
    border-radius: 0 0 8px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: transform 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #8bd4c3;
    outline-offset: 2px;
}
html.light .skip-link {
    background: #ffffff;
    color: #006b5f;
    border-color: #006b5f;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    ring: 1px;
    ring-color: #8bd4c3;
}

/* ===== UX-5: NAV SLOT RESERVED SPACE (anti-CLS) =====
   nav-loader.js fetches TopNavBar / SideNavBar / Footer fragments AFTER first
   paint and injects them into these slots. Reserve their footprint up front so
   the page doesn't render headerless and then shift when the fragments arrive.
   A faint skeleton tint hints the area is loading; it's covered once injected.
   Fetch failure is handled gracefully (loadHTML -> '' -> slot left empty). */

/* Top nav is position:fixed (floating pill at top:1rem, ~3.5rem tall) so it
   doesn't push content, but reserve a matching skeleton band to avoid a flash
   of unstyled gap at the very top before the pill paints. */
[data-top-nav]:empty {
    display: block;
    min-height: 4.5rem;
}

/* Side nav reserves the desktop sidebar width (matches aside w-72 = 18rem) so
   main content (md:ml-72) doesn't jump left→right when the aside injects. */
@media (min-width: 769px) {
    body[data-nav-variant] [data-side-nav]:empty {
        display: block;
        width: 18rem;
        flex-shrink: 0;
    }
    /* Collapsed state: don't reserve width (matches collapsed aside). */
    body.sidebar-collapsed [data-side-nav]:empty {
        width: 0;
    }
}

/* Footer reserves vertical space so the document height is stable pre-inject. */
[data-footer]:empty {
    display: block;
    min-height: 12rem;
}

/* Subtle loading tint on still-empty slots (removed once children inject). */
[data-top-nav]:empty,
[data-side-nav]:empty,
[data-footer]:empty {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}

@media (prefers-reduced-motion: no-preference) {
    [data-top-nav]:empty,
    [data-side-nav]:empty,
    [data-footer]:empty {
        animation: nav-slot-pulse 1.4s ease-in-out infinite;
    }
}

@keyframes nav-slot-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* ===== COLLAPSIBLE SIDEBAR ===== */

[data-side-nav] aside {
    transition: width 0.32s cubic-bezier(0.4,0,0.2,1),
                transform 0.32s cubic-bezier(0.4,0,0.2,1),
                opacity 0.28s ease;
}

/* Desktop collapsed */
body.sidebar-collapsed [data-side-nav] aside {
    width: 0 !important;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Smooth margin transition for all authenticated page content */
body[data-nav-variant] main {
    transition: margin-left 0.32s cubic-bezier(0.4,0,0.2,1);
}

/* Sidebar collapse: zero out the md:ml-72 margin on collapse */
body[data-nav-variant].sidebar-collapsed main,
body[data-nav-variant].sidebar-collapsed [data-side-nav] ~ div {
    margin-left: 0 !important;
}

/* Vault/flex-layout pages use flex-1 (no margin) — ensure aside collapses cleanly */
body[data-nav-variant] .flex > [data-side-nav] + main,
body[data-nav-variant] .flex > [data-side-nav] ~ main {
    transition: flex 0.32s cubic-bezier(0.4,0,0.2,1), min-width 0.32s ease;
}

/* Mobile: off-canvas sidebar + no content margin */
@media (max-width: 768px) {
    [data-side-nav] aside {
        position: fixed !important;
        z-index: 50;
        top: 60px !important;
        height: calc(100vh - 60px) !important;
        transform: translateX(-100%);
        width: 18rem !important;
        opacity: 1 !important;
    }

    body.sidebar-open [data-side-nav] aside {
        transform: translateX(0);
    }

    body[data-nav-variant] main,
    body[data-nav-variant] [data-side-nav] ~ div {
        margin-left: 0 !important;
    }
}

/* ===== TYPOGRAPHY SYSTEM ===== */
/* Fluid type scale using clamp() — scales between mobile and desktop */

/* Hero H1 — landing page only */
.type-hero {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Page H1 — section entry heading */
.type-h1 {
    font-family: 'Newsreader', serif;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Section H2 */
.type-h2 {
    font-family: 'Newsreader', serif;
    font-size: clamp(1.375rem, 2.5vw, 2rem);
    line-height: 1.2;
}

/* Card H3 */
.type-h3 {
    font-family: 'Newsreader', serif;
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    line-height: 1.3;
}

/* Metric number — KPI/stat display */
.type-metric {
    font-family: 'Newsreader', serif;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: 1;
}

/* Body text */
.type-body {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.7;
}

/* Small body / card description */
.type-body-sm {
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Label (uppercase tracking) */
.type-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1.4;
}

/* Micro label */
.type-micro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

/* ===== IMAGE SYSTEM ===== */

/* Product card image container — 3:4 portrait */
.img-product {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-surface-container);
}
.img-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.img-product:hover img {
    transform: scale(1.06);
}

/* Square card image — 1:1 */
.img-square {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-surface-container);
}
.img-square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Landscape card image — 16:9 */
.img-landscape {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface-container);
}
.img-landscape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Portrait hero image — 4:5 */
.img-portrait {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-surface-container);
}
.img-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Avatar */
.img-avatar {
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
}
.img-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
   DESIGN SYSTEM EXTENSION — v2
   Skeuomorphism (70%) + Claymorphism (30%) +
   Liquid Morphism + Glassmorphism (keep)
   + Root dark-mode CSS vars (fix empty-var DevTools bug)
   ============================================================ */

/* ── Root CSS Custom Properties (dark mode defaults) ────── */
:root {
    --color-background:               #081614;
    --color-surface:                  #152220;
    --color-surface-dim:              #081614;
    --color-surface-container:        #152220;
    --color-surface-container-low:    #101e1c;
    --color-surface-container-lowest: #04100e;
    --color-surface-container-high:   #1f2d2a;
    --color-surface-container-highest:#2a3735;
    --color-surface-bright:           #2e3c39;
    --color-surface-variant:          #2a3735;
    --color-surface-tint:             #8bd4c3;
    --color-on-background:            #d6e6e2;
    --color-on-surface:               #d6e6e2;
    /* UX-8: muted body text. #c7d2ce on surfaces #081614/#152220 ≈ 11:1 (was
       #bec9c5 ≈ 9.6:1). Lightened so stacked opacity-50/60 text overlays still
       clear AA 4.5:1 (≈ 4.8:1 at opacity .6, ≈ 6:1 at .7) without per-page edits. */
    --color-on-surface-variant:       #c7d2ce;
    --color-primary:                  #8bd4c3;
    --color-primary-container:        #005c4f;
    --color-on-primary:               #00382f;
    --color-on-primary-container:     #89d2c1;
    --color-secondary:                #a5cfc2;
    --color-secondary-container:      #264e43;
    --color-tertiary:                 #eac349;
    --color-tertiary-container:       #cca830;
    --color-on-tertiary:              #3c2f00;
    --color-outline:                  #89938f;
    --color-outline-variant:          #3f4946;
    --color-error:                    #ffb4ab;
    --color-inverse-surface:          #d6e6e2;
    --color-inverse-on-surface:       #253330;
    /* Brand-specific */
    --color-brand-green:              #3DB035;
    --color-gold-rich:                #D4A843;
    --color-gold-deep:                #B8860B;
    --color-gold-shine:               #F5C842;
}

/* Light mode overrides kept & extended for proper contrast */
html.light {
    color-scheme: light;
    --color-background:               #F8F4EE;
    --color-surface:                  #FFFFFF;
    --color-surface-dim:              #EEE9E0;
    --color-surface-container:        #F5F0E8;
    --color-surface-container-low:    #FAF6F0;
    --color-surface-container-lowest: #FFFFFF;
    --color-surface-container-high:   #EDE6DA;
    --color-surface-container-highest:#E4DBCB;
    --color-on-background:            #1A2922;
    --color-on-surface:               #1A2922;
    /* UX-8: muted body text. #3E534C on light surfaces #F8F4EE/#FFFFFF ≈ 8.1:1
       (was #4A5E58 ≈ 6.6:1) so opacity-stacked overlays still clear AA 4.5:1. */
    --color-on-surface-variant:       #3E534C;
    /* UX-8: outline used for secondary/placeholder text — darkened from #7A8E88
       (≈ 3.3:1, AA FAIL for body) to #5C7068 (≈ 4.6:1, AA pass). */
    --color-outline:                  #5C7068;
    --color-outline-variant:          #C8D4CF;
    --color-primary:                  #006B5F;
    --color-primary-container:        #C8EDE5;
    --color-on-primary:               #FFFFFF;
    --color-on-primary-container:     #002019;
    --color-secondary:                #2D6B5F;
    --color-secondary-container:      #D4EDE6;
    --color-on-secondary:             #FFFFFF;
    --color-tertiary:                 #B8860B;
    --color-tertiary-container:       #FFF0C0;
    --color-on-tertiary:              #FFFFFF;
    --color-error:                    #BA1A1A;
    --color-surface-bright:           #FFFFFF;
    --color-surface-variant:          #E8F2ED;
    --color-gold-rich:                #A07A00;
    --color-gold-deep:                #7A5C00;
    --color-gold-shine:               #C9940A;
    --color-brand-green:              #2A8A24;
}

html.light body {
    background-color: var(--color-background);
    color: var(--color-on-surface);
}

html.light .glass-panel {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

html.light .glass-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

html.light .glass-nav {
    background: rgba(248, 244, 238, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

html.light .skeu-card {
    background: linear-gradient(145deg, #FFFFFF, #F5F0E8);
    box-shadow:
        6px 6px 18px rgba(0, 0, 0, 0.10),
        -3px -3px 8px rgba(255, 255, 255, 0.95),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.07);
}

html.light .clay-card {
    background: linear-gradient(145deg, #FFFFFF, #F0EBE0);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.04);
}

/* ── Skeuomorphism Classes (70% of cards/surfaces) ─────── */
.skeu-card {
    background: linear-gradient(145deg, rgba(31, 46, 43, 0.97), rgba(14, 24, 22, 0.99));
    box-shadow:
        6px 6px 18px rgba(0, 0, 0, 0.55),
        -2px -2px 8px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.skeu-card:hover {
    box-shadow:
        8px 8px 24px rgba(0, 0, 0, 0.65),
        -3px -3px 10px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(139, 212, 195, 0.15);
    transform: translateY(-3px);
}

.skeu-card-gold:hover {
    box-shadow:
        8px 8px 24px rgba(0, 0, 0, 0.65),
        -3px -3px 10px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(234, 195, 73, 0.25);
    transform: translateY(-3px);
}

.skeu-surface {
    background: linear-gradient(180deg, rgba(21, 34, 32, 0.95) 0%, rgba(10, 20, 18, 0.98) 100%);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.03);
}

.skeu-btn {
    background: linear-gradient(145deg, #1b6a5c, #005c4f);
    color: #d6e6e2;
    box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.45),
        -1px -1px 4px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.skeu-btn:hover {
    background: linear-gradient(145deg, #1d7a6a, #006b5d);
    box-shadow:
        4px 4px 10px rgba(0, 0, 0, 0.5),
        -2px -2px 6px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.skeu-btn:active {
    box-shadow:
        1px 1px 4px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}

/* ── Claymorphism Classes (30% of interactive elements) ─── */
.clay-card {
    background: linear-gradient(145deg, rgba(28, 48, 44, 0.92), rgba(18, 32, 29, 0.96));
    border-radius: 28px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 2px 0 rgba(255, 255, 255, 0.10),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.clay-card:hover {
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(139, 212, 195, 0.12),
        inset 0 2px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.25);
    transform: translateY(-5px) scale(1.01);
}

.clay-badge {
    border-radius: 999px;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.clay-icon {
    border-radius: 18px;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* ── Liquid Morphism ────────────────────────────────────── */
@keyframes blob-morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50%       { border-radius: 50% 50% 40% 60% / 40% 70% 60% 30%; }
    75%       { border-radius: 40% 60% 60% 40% / 70% 30% 50% 50%; }
}

@keyframes blob-morph-2 {
    0%, 100% { border-radius: 40% 60% 60% 40% / 70% 30% 50% 50%; }
    33%       { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    66%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}

@keyframes blob-morph-3 {
    0%, 100% { border-radius: 50% 50% 40% 60% / 40% 70% 60% 30%; }
    40%       { border-radius: 40% 60% 60% 40% / 70% 30% 50% 50%; }
    80%       { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes liquid-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    30%       { transform: translate(40px, -30px) scale(1.05); }
    60%       { transform: translate(-25px, 20px) scale(0.97); }
    85%       { transform: translate(15px, -10px) scale(1.02); }
}

@keyframes liquid-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%       { transform: translate(-50px, 25px) scale(1.06); }
    65%       { transform: translate(30px, -20px) scale(0.96); }
}

.liquid-blob {
    position: absolute;
    pointer-events: none;
    filter: blur(60px);
    animation: blob-morph 14s ease-in-out infinite, liquid-drift 18s ease-in-out infinite;
    will-change: transform, border-radius;
}

.liquid-blob-2 {
    position: absolute;
    pointer-events: none;
    filter: blur(50px);
    animation: blob-morph-2 11s ease-in-out infinite, liquid-drift-2 22s ease-in-out infinite;
    will-change: transform, border-radius;
}

.liquid-blob-3 {
    position: absolute;
    pointer-events: none;
    filter: blur(70px);
    animation: blob-morph-3 16s ease-in-out infinite;
    will-change: transform, border-radius;
}

.liquid-surface {
    position: relative;
    overflow: hidden;
}

.liquid-surface::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(0, 92, 79, 0.06),
        rgba(139, 212, 195, 0.04),
        rgba(234, 195, 73, 0.03),
        rgba(0, 92, 79, 0.06)
    );
    animation: liquid-drift 30s linear infinite;
    pointer-events: none;
}

/* ── Marquee (trust ticker) ─────────────────────────────── */
.marquee-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.marquee-wrap::before,
.marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.marquee-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--color-background), transparent);
}

.marquee-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--color-background), transparent);
}

.marquee-row {
    display: flex;
    gap: 0;
    white-space: nowrap;
    will-change: transform;
}

@keyframes marquee-ltr {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes marquee-rtl {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.marquee-row.ltr {
    animation: marquee-ltr 30s linear infinite;
}

.marquee-row.rtl {
    animation: marquee-rtl 36s linear infinite;
}

.marquee-row:hover {
    animation-play-state: paused;
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 2.5rem;
    flex-shrink: 0;
}

/* ── Logo nav image ─────────────────────────────────────── */
.nav-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ── Step number (enhanced) ─────────────────────────────── */
.step-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
    background: linear-gradient(145deg, rgba(0, 92, 79, 0.5), rgba(0, 45, 36, 0.8));
    border: 1px solid rgba(139, 212, 195, 0.25);
    box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #8bd4c3;
}

.step-circle-gold {
    background: linear-gradient(145deg, rgba(212, 168, 67, 0.5), rgba(180, 134, 11, 0.8));
    border: 1px solid rgba(234, 195, 73, 0.35);
    color: #eac349;
}

/* ── Gold divider line ──────────────────────────────────── */
.gold-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(234, 195, 73, 0.4), transparent);
}

.teal-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(139, 212, 195, 0.25), transparent);
}

/* ── Income plan highlight number ──────────────────────── */
.income-number {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1;
    background: linear-gradient(135deg, var(--color-gold-shine), var(--color-tertiary), var(--color-gold-rich));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Texture grain overlay (shared) ─────────────────────── */
.texture-grain {
    position: relative;
}

.texture-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* ── Scroll-reveal (improved — no threshold bug) ─────────── */
.sr-hidden {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.sr-hidden.d1 { transition-delay: 0.08s; }
.sr-hidden.d2 { transition-delay: 0.16s; }
.sr-hidden.d3 { transition-delay: 0.25s; }
.sr-hidden.d4 { transition-delay: 0.36s; }
.sr-hidden.d5 { transition-delay: 0.50s; }

.sr-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .liquid-blob, .liquid-blob-2, .liquid-blob-3 { animation: none; }
    .marquee-row.ltr, .marquee-row.rtl           { animation: none; }
    .sr-hidden { opacity: 1; transform: none; transition: none; }

    /* UX-14: catch-all — kill remaining per-page/component animations
       (TopNav neon-comet conic spin/breath, pill shell, cart bump, nav-slot
       pulse, liquid-surface drift) for users who request reduced motion. */
    .pill-nav,
    .pill-nav::before,
    .pill-nav::after,
    .liquid-surface::before,
    #nav-cart-badge.bump,
    [data-top-nav]:empty,
    [data-side-nav]:empty,
    [data-footer]:empty {
        animation: none !important;
    }
    html { scroll-behavior: auto; }
}

/* ── CRITICAL: Body background must respond to CSS vars ── */
body {
  background-color: var(--color-background) !important;
  color: var(--color-on-surface) !important;
}

/* ── Light mode: Force all section backgrounds ── */
html.light section,
html.light header,
html.light footer {
  background: var(--color-background) !important;
  color: var(--color-on-surface) !important;
}

/* Light mode — use brand green tinted surfaces for alternating sections */
html.light .section-light-alt {
  background: rgba(61, 176, 53, 0.04) !important;
  border-top: 1px solid rgba(61, 176, 53, 0.12);
  border-bottom: 1px solid rgba(61, 176, 53, 0.12);
}

html.light .hero-section-light {
  background: linear-gradient(160deg, #FFFFFF 0%, rgba(61,176,53,0.06) 60%, #FFFFFF 100%) !important;
}

/* ── Light mode component fixes ── */
html.light .skeu-card {
  background: linear-gradient(145deg, #FFFFFF, #F8FDF8) !important;
  box-shadow:
    5px 5px 16px rgba(0,0,0,0.09),
    -2px -2px 7px rgba(255,255,255,0.98),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(61,176,53,0.15) !important;
}

html.light .skeu-card:hover {
  border-color: rgba(61,176,53,0.3) !important;
  box-shadow:
    6px 6px 20px rgba(0,0,0,0.12),
    -3px -3px 9px rgba(255,255,255,1),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.05),
    0 0 0 1px rgba(61,176,53,0.2) !important;
}

html.light .clay-card {
  background: linear-gradient(145deg, #FFFFFF, #F5FBF5) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.10),
    0 0 0 1px rgba(61,176,53,0.1),
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(0,0,0,0.03) !important;
}

html.light .glass-panel {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(61,176,53,0.14) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
}

html.light .glass-card {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(61,176,53,0.10) !important;
}

html.light .glass-nav {
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid rgba(61,176,53,0.12) !important;
}

html.light .pill-nav {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(61,176,53,0.18) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(61,176,53,0.08) !important;
}

html.light .frosted-badge {
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(61,176,53,0.2) !important;
}

html.light .btn-primary {
  background: linear-gradient(135deg, #006b5f 0%, #1b6a5c 100%) !important;
}

html.light .btn-secondary {
  background: rgba(61,176,53,0.08) !important;
  border: 1px solid rgba(61,176,53,0.25) !important;
  color: #1A2922 !important;
}

html.light .btn-gold {
  background: #B8860B !important;
  color: #fff !important;
}

/* Light mode scrollbar */
html.light ::-webkit-scrollbar-track { background: #f0f0f0; }
html.light ::-webkit-scrollbar-thumb { background: rgba(61,176,53,0.3); }
html.light ::-webkit-scrollbar-thumb:hover { background: rgba(61,176,53,0.5); }

/* Light mode selection */
html.light ::selection {
  background-color: rgba(61,176,53,0.2);
  color: #1A2922;
}

/* ── Light mode nav — full contrast fix ─────────────────── */
html.light nav,
html.light [data-top-nav] nav {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
}

/* All text inside the pill nav → dark in light mode */
html.light .pill-nav,
html.light .pill-nav a,
html.light .pill-nav button,
html.light .pill-nav span {
  color: #1A2922 !important;
}

/* Nav links specifically */
html.light .nav-pill-link {
  color: #2A3C36 !important;
}
html.light .nav-pill-link:hover {
  background: rgba(61,176,53,0.10) !important;
  color: #006b5f !important;
}
html.light .nav-pill-link.active {
  background: rgba(61,176,53,0.15) !important;
  color: #006b5f !important;
}

/* Lang & theme toggle buttons */
html.light [data-lang-btn] {
  color: #2A3C36 !important;
  background: rgba(0,0,0,0.04) !important;
}
html.light [data-lang-btn]:hover {
  background: rgba(61,176,53,0.12) !important;
  color: #006b5f !important;
}
html.light [data-theme-btn] {
  color: #2A3C36 !important;
}
html.light [data-theme-btn]:hover {
  background: rgba(61,176,53,0.12) !important;
  color: #006b5f !important;
}
html.light [data-theme-btn] .material-symbols-outlined {
  color: #2A3C36 !important;
}

/* Notification & icon buttons in nav */
html.light .pill-nav button .material-symbols-outlined {
  color: #2A3C36 !important;
}
html.light .pill-nav button:hover .material-symbols-outlined {
  color: #006b5f !important;
}

/* Profile avatar border */
html.light [data-profile-trigger] button {
  border-color: rgba(61,176,53,0.35) !important;
}

/* Profile dropdown in light */
html.light [data-profile-dropdown] {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(61,176,53,0.18) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
  color: #1A2922 !important;
}
html.light [data-profile-dropdown] a,
html.light [data-profile-dropdown] p,
html.light [data-profile-dropdown] span,
html.light [data-profile-dropdown] button {
  color: #1A2922 !important;
}
html.light [data-profile-dropdown] a:hover,
html.light [data-profile-dropdown] button:hover {
  background: rgba(61,176,53,0.08) !important;
}
html.light [data-profile-dropdown] hr {
  border-color: rgba(0,0,0,0.08) !important;
}
html.light [data-profile-dropdown] [data-logout-btn] {
  color: #BA1A1A !important;
}

/* Mobile slide-down menu */
html.light [data-mobile-menu] {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(61,176,53,0.15) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
}
html.light [data-mobile-menu] a,
html.light [data-mobile-menu] span {
  color: #1A2922 !important;
}
html.light [data-mobile-menu] a:hover {
  background: rgba(61,176,53,0.08) !important;
}
html.light [data-mobile-menu] hr {
  border-color: rgba(0,0,0,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — Full skeuomorphism + relevo buttons (ALL modes)
   Dark sidebar (default): keep existing deep-glass bg, deeper shadow
   Light sidebar: cream/white with punched-in relevo nav items
═══════════════════════════════════════════════════════════════ */

/* Dark mode sidebar shadow upgrade */
[data-side-nav] aside {
  box-shadow:
    4px 0 32px rgba(0,0,0,0.65),
    8px 0 60px rgba(0,0,0,0.45),
    2px 0 8px rgba(0,0,0,0.40),
    inset -1px 0 0 rgba(139,212,195,0.06) !important;
}

/* Skeuomorphic relevo on nav-item (dark) */
.nav-item {
  transition: all 0.18s cubic-bezier(0.34,1.2,0.64,1) !important;
  box-shadow:
    2px 2px 6px rgba(0,0,0,0.45),
    -1px -1px 3px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.nav-item:hover {
  box-shadow:
    3px 3px 10px rgba(0,0,0,0.55),
    -1px -1px 4px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transform: translateY(-1px) !important;
}
.nav-item:active {
  transform: translateY(0px) !important;
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,0.5),
    inset -1px -1px 3px rgba(255,255,255,0.03) !important;
}
.nav-item-active {
  box-shadow:
    0 4px 14px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -2px 4px rgba(0,0,0,0.25) !important;
}

/* ── Sidebar nav items in light mode ─────────────────────── */
html.light .nav-item {
  background: linear-gradient(145deg, #f0faf4, #e4f5eb) !important;
  border: 1px solid rgba(0,92,79,0.14) !important;
  color: rgba(0,34,24,0.85) !important;
  box-shadow:
    3px 3px 8px rgba(0,92,79,0.15),
    -2px -2px 5px rgba(255,255,255,0.95),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.05) !important;
}
html.light .nav-item:hover {
  background: linear-gradient(145deg, #e8f8f0, #d8f0e8) !important;
  border-color: rgba(0,107,79,0.22) !important;
  color: #003d28 !important;
  box-shadow:
    4px 4px 12px rgba(0,92,79,0.20),
    -2px -2px 6px rgba(255,255,255,1),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  transform: translateY(-1px) !important;
}
html.light .nav-item:active {
  transform: translateY(0px) !important;
  box-shadow:
    inset 3px 3px 8px rgba(0,92,79,0.18),
    inset -1px -1px 4px rgba(255,255,255,0.8) !important;
}
html.light .nav-item .material-symbols-outlined {
  color: rgba(0,52,36,0.78) !important;
}
html.light .nav-item-active {
  background: linear-gradient(145deg, #d4f0e4, #c0e8d6) !important;
  color: #003d28 !important;
  border-color: rgba(0,107,79,0.28) !important;
  box-shadow:
    inset 3px 3px 8px rgba(0,92,79,0.20),
    inset -1px -1px 4px rgba(255,255,255,0.85),
    0 2px 8px rgba(0,107,79,0.15) !important;
}
html.light .nav-item-active .material-symbols-outlined {
  color: #005c4f !important;
}

/* Sidebar panel background (light) */
html.light aside,
html.light [data-side-nav] aside {
  background: linear-gradient(180deg, #f5fcf7 0%, #e8f5ee 60%, #ddf0e7 100%) !important;
  border-right: 1px solid rgba(0,92,79,0.14) !important;
  box-shadow:
    6px 0 32px rgba(0,92,79,0.14),
    12px 0 60px rgba(0,92,79,0.08),
    2px 0 8px rgba(0,92,79,0.10),
    inset -1px 0 0 rgba(0,92,79,0.08) !important;
}

/* All nav links inside the sidebar (covers emerald-* Tailwind classes) */
html.light [data-side-nav] aside a,
html.light [data-side-nav] aside button:not([data-sidebar-collapse]) {
  color: rgba(0,34,24,0.85) !important;
  background: transparent !important;
}
html.light [data-side-nav] aside a:hover {
  color: #003d28 !important;
  background: rgba(0,92,79,0.08) !important;
}
html.light [data-side-nav] aside .border-b,
html.light [data-side-nav] aside .border-t,
html.light [data-side-nav] aside [class*="border-white"],
html.light [data-side-nav] aside [class*="border-emerald"] {
  border-color: rgba(0,92,79,0.12) !important;
}
/* Sidebar section divider labels */
html.light [data-side-nav] aside .text-on-surface-variant,
html.light [data-side-nav] aside [class*="text-emerald"] {
  color: rgba(0,52,36,0.55) !important;
}
/* Brand headline inside sidebar */
html.light [data-side-nav] aside .font-headline {
  color: #004d40 !important;
}
/* All icons inside sidebar */
html.light [data-side-nav] aside .material-symbols-outlined {
  color: rgba(0,52,36,0.78) !important;
}
html.light [data-side-nav] aside a:hover .material-symbols-outlined {
  color: #003d28 !important;
}
/* Mobile bottom nav (bg-emerald-950/90) */
html.light aside[class*="emerald-950"] {
  background: linear-gradient(0deg, #edf5f0 0%, #f5fbf7 100%) !important;
  border-top: 1px solid rgba(0,92,79,0.15) !important;
  border-right: none !important;
  box-shadow: 0 -6px 24px rgba(0,92,79,0.12) !important;
}

/* ── General on-surface text in light ────────────────────── */
html.light .text-on-surface-variant {
  color: #4A6B60 !important;
}
html.light .text-on-surface {
  color: #1A2922 !important;
}
html.light .text-on-background {
  color: #1A2922 !important;
}

/* Marquee fade edges in light */
html.light .marquee-wrap::before {
  background: linear-gradient(to right, var(--color-background), transparent) !important;
}
html.light .marquee-wrap::after {
  background: linear-gradient(to left, var(--color-background), transparent) !important;
}

/* Light mode income number */
html.light .income-number {
  background: linear-gradient(135deg, #B8860B, #D4A843, #7A5C00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* ═══════════════════════════════════════════════════════════════
   NAV ICON BUTTONS — Clay pill treatment (dark + light)
═══════════════════════════════════════════════════════════════ */
.nav-icon-btn {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.07);
    box-shadow:
        0 3px 10px rgba(0,0,0,0.35),
        0 1px 3px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.09);
    color: #c8d8d4;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-icon-btn:hover {
    background: rgba(255,255,255,0.14);
    color: #d6e6e2;
    box-shadow:
        0 5px 16px rgba(0,0,0,0.45),
        0 2px 6px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    transform: translateY(-1px) scale(1.06);
}
.nav-icon-btn:active {
    transform: scale(0.94);
    box-shadow:
        0 1px 4px rgba(0,0,0,0.3),
        inset 0 2px 6px rgba(0,0,0,0.25);
}

/* Light mode: solid white clay button with green shadow */
html.light .nav-icon-btn {
    background: linear-gradient(145deg, #ffffff, #f4fbf4) !important;
    color: #1a2922 !important;
    border: 1px solid rgba(61,176,53,0.22) !important;
    box-shadow:
        0 4px 12px rgba(61,176,53,0.18),
        0 1px 4px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.05) !important;
}
html.light .nav-icon-btn:hover {
    background: linear-gradient(145deg, #f5fcf5, #eaf6ea) !important;
    color: #206b19 !important;
    border-color: rgba(61,176,53,0.45) !important;
    box-shadow:
        0 7px 20px rgba(61,176,53,0.25),
        0 3px 8px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,1) !important;
    transform: translateY(-2px) scale(1.07);
}
html.light .nav-icon-btn:active {
    box-shadow:
        0 1px 4px rgba(61,176,53,0.15),
        inset 0 2px 5px rgba(0,0,0,0.08) !important;
    transform: scale(0.95);
}
html.light .nav-icon-btn .material-symbols-outlined {
    color: #2a3c36 !important;
}
html.light .nav-icon-btn:hover .material-symbols-outlined {
    color: #3DB035 !important;
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — Global text inheritance safety net
   Ensures any text-on-surface-variant / on-surface class works
   even when CSS vars haven't loaded in time (fallback race)
═══════════════════════════════════════════════════════════════ */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
    color: #1a2922;
}
html.light p,
html.light li,
html.light span:not([class*="material"]):not([class*="badge"]):not([class*="chip"]) {
    color: inherit;
}
html.light [class*="text-on-surface"] {
    color: #1a2922 !important;
}
html.light [class*="text-on-surface-variant"] {
    color: #4a635a !important;
}
html.light [class*="text-on-background"] {
    color: #1a2922 !important;
}

/* ── Cards and surfaces in light mode: never pure-dark backgrounds ── */
html.light .glass-panel,
html.light .glass-card {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(61,176,53,0.12) !important;
    color: #1a2922 !important;
}
html.light .skeu-surface {
    background: linear-gradient(180deg, #f8fdf8, #eef6ee) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06) !important;
    color: #1a2922 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL MEMBER PAGES — Auto Clay 70% / Skeu 30%
   Targets all body[data-nav-variant] pages (vault, mentor, profile,
   settings, executive, crm, warehouse, maputo, orders, checkout…)
   Converts existing glass/surface classes without touching HTML.
═══════════════════════════════════════════════════════════════════ */

/* ── 70% CLAY: primary content cards ─────────────────────────────── */
body[data-nav-variant] .glass-panel {
    background: linear-gradient(145deg, rgba(22,42,38,0.96), rgba(12,26,23,0.99)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow:
        0 20px 56px rgba(0,0,0,0.52),
        0 6px 20px rgba(0,0,0,0.28),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 2px 0 rgba(255,255,255,0.09),
        inset 0 -2px 0 rgba(0,0,0,0.28) !important;
    transition: box-shadow 0.32s ease, transform 0.32s ease !important;
}
body[data-nav-variant] .glass-panel:hover {
    box-shadow:
        0 28px 70px rgba(0,0,0,0.60),
        0 8px 28px rgba(0,0,0,0.32),
        0 0 0 1px rgba(139,212,195,0.12),
        inset 0 2px 0 rgba(255,255,255,0.11),
        inset 0 -2px 0 rgba(0,0,0,0.28) !important;
    transform: translateY(-3px) !important;
}

body[data-nav-variant] .glass-card {
    background: linear-gradient(145deg, rgba(26,46,42,0.94), rgba(14,28,25,0.98)) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.055) !important;
    box-shadow:
        0 12px 36px rgba(0,0,0,0.45),
        0 4px 12px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.22) !important;
}

/* Section/article cards that use rounded-xl/2xl + any bg-surface class */
body[data-nav-variant] section.rounded-xl,
body[data-nav-variant] section.rounded-2xl,
body[data-nav-variant] div.rounded-xl:not([class*="w-"]):not([class*="h-"]):not([class*="absolute"]),
body[data-nav-variant] div.rounded-2xl:not([class*="w-"]):not([class*="h-"]):not([class*="absolute"]) {
    border-radius: 22px !important;
}

/* ── 30% SKEU: surface containers / stat boxes ─────────────────────── */
body[data-nav-variant] [class*="bg-surface-container-high"]:not(.glass-panel):not(.glass-card) {
    background: linear-gradient(160deg, rgba(20,36,33,0.98) 0%, rgba(10,20,18,1) 100%) !important;
    border-radius: 14px;
    box-shadow:
        4px 4px 12px rgba(0,0,0,0.5),
        -1px -1px 5px rgba(255,255,255,0.03),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

body[data-nav-variant] [class*="bg-surface-container"]:not([class*="high"]):not([class*="low"]):not(.glass-panel):not(.glass-card) {
    background: linear-gradient(160deg, rgba(18,32,30,0.97) 0%, rgba(8,18,16,0.99) 100%) !important;
    border-radius: 12px;
    box-shadow:
        3px 3px 10px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}

body[data-nav-variant] [class*="bg-surface-container-low"] {
    background: linear-gradient(160deg, rgba(15,28,26,0.95) 0%, rgba(8,16,15,0.98) 100%) !important;
    border-radius: 12px;
    box-shadow:
        2px 2px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ── SKEU: table rows ────────────────────────────────────────────────── */
body[data-nav-variant] .table-row-hover,
body[data-nav-variant] .table-row-hover td {
    color: #d6e6e2;
}
body[data-nav-variant] .table-row-hover {
    background: linear-gradient(160deg, rgba(18,34,30,0.95), rgba(10,20,18,0.98)) !important;
    border-radius: 10px;
    box-shadow:
        2px 2px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
}
body[data-nav-variant] .table-row-hover:hover {
    background: linear-gradient(160deg, rgba(24,44,38,0.98), rgba(14,26,22,0.99)) !important;
    box-shadow:
        3px 3px 12px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.3) !important;
    border-color: rgba(139,212,195,0.10) !important;
}

/* ── CLAY: progress bars ─────────────────────────────────────────────── */
body[data-nav-variant] .h-3.rounded-full,
body[data-nav-variant] [class*="h-2"][class*="rounded-full"] {
    background: rgba(0,0,0,0.4) !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), inset 0 -1px 2px rgba(255,255,255,0.03) !important;
}

/* ── CLAY: icon containers ───────────────────────────────────────────── */
body[data-nav-variant] [class*="rounded-xl"][class*="p-3"],
body[data-nav-variant] [class*="rounded-xl"][class*="p-4"] {
    box-shadow:
        0 6px 18px rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}

/* ── CLAY: buttons inside member pages ───────────────────────────────── */
body[data-nav-variant] .btn-primary {
    border-radius: 999px !important;
    box-shadow:
        0 8px 22px rgba(0,92,79,0.42),
        0 3px 8px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -2px 0 rgba(0,0,0,0.22) !important;
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
}
body[data-nav-variant] .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 12px 30px rgba(0,92,79,0.52),
        0 5px 12px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -2px 0 rgba(0,0,0,0.22) !important;
}
body[data-nav-variant] .btn-gold {
    border-radius: 999px !important;
    box-shadow:
        0 8px 22px rgba(204,168,48,0.38),
        0 3px 8px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.38),
        inset 0 -2px 0 rgba(0,0,0,0.14) !important;
    transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1) !important;
}
body[data-nav-variant] .btn-gold:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 12px 30px rgba(234,195,73,0.48),
        0 5px 12px rgba(0,0,0,0.26),
        inset 0 1px 0 rgba(255,255,255,0.42),
        inset 0 -2px 0 rgba(0,0,0,0.14) !important;
}
body[data-nav-variant] .btn-secondary {
    border-radius: 999px !important;
    box-shadow:
        3px 3px 10px rgba(0,0,0,0.4),
        -1px -1px 4px rgba(255,255,255,0.03),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.28) !important;
}

/* ── LIGHT MODE equivalents ──────────────────────────────────────────── */
/* ── Light mode: STRONG clay panels ──────────────────────── */
html.light body[data-nav-variant] .glass-panel {
    background: linear-gradient(145deg, #ffffff 0%, #edf8f2 100%) !important;
    border: 1px solid rgba(61,176,53,0.22) !important;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.18),
        0 8px 24px rgba(61,176,53,0.14),
        0 2px 6px rgba(0,0,0,0.10),
        0 0 0 1px rgba(61,176,53,0.12),
        inset 0 2px 0 rgba(255,255,255,1),
        inset 0 -3px 0 rgba(0,0,0,0.08) !important;
    color: #1a2922 !important;
}
html.light body[data-nav-variant] .glass-panel:hover {
    box-shadow:
        0 32px 80px rgba(0,0,0,0.22),
        0 12px 32px rgba(61,176,53,0.18),
        0 4px 10px rgba(0,0,0,0.12),
        0 0 0 1px rgba(61,176,53,0.22),
        inset 0 2px 0 rgba(255,255,255,1),
        inset 0 -3px 0 rgba(0,0,0,0.09) !important;
}
html.light body[data-nav-variant] .glass-card {
    background: linear-gradient(145deg, #ffffff 0%, #f0faf5 100%) !important;
    border: 1px solid rgba(61,176,53,0.20) !important;
    box-shadow:
        0 10px 32px rgba(0,0,0,0.15),
        0 4px 12px rgba(61,176,53,0.10),
        0 1px 4px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -2px 0 rgba(0,0,0,0.06) !important;
    color: #1a2922 !important;
}

/* ── Light mode: STRONG skeu surface containers ─────────────────────
   Specificity must beat the dark-mode rules above (0,4,1 for -high,
   0,6,1 for plain -container). We add html.light + same :not() guards.
─────────────────────────────────────────────────────────────────── */
html.light body[data-nav-variant] [class*="bg-surface-container-high"]:not(.glass-panel):not(.glass-card) {
    background: linear-gradient(160deg, #ffffff 0%, #eaf6ef 100%) !important;
    border: 1px solid rgba(61,176,53,0.20) !important;
    box-shadow:
        6px 6px 16px rgba(0,0,0,0.13),
        -3px -3px 8px rgba(255,255,255,0.95),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -2px 0 rgba(0,0,0,0.07) !important;
    color: #1a2922 !important;
}

html.light body[data-nav-variant] [class*="bg-surface-container"]:not([class*="high"]):not([class*="low"]):not(.glass-panel):not(.glass-card) {
    background: linear-gradient(160deg, #f4fbf6 0%, #e8f5ed 100%) !important;
    border: 1px solid rgba(61,176,53,0.15) !important;
    box-shadow:
        4px 4px 12px rgba(0,0,0,0.10),
        -2px -2px 6px rgba(255,255,255,0.92),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.05) !important;
    color: #1a2922 !important;
}

html.light body[data-nav-variant] [class*="bg-surface-container-low"] {
    background: linear-gradient(160deg, #f0faf5 0%, #e4f3ea 100%) !important;
    border: 1px solid rgba(61,176,53,0.12) !important;
    box-shadow:
        3px 3px 10px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,1) !important;
    color: #1a2922 !important;
}

/* ── Light mode: STRONG skeu table rows ─────────────────── */
html.light body[data-nav-variant] .table-row-hover,
html.light body[data-nav-variant] .table-row-hover td {
    color: #1a2922 !important;
}
html.light body[data-nav-variant] .table-row-hover {
    background: linear-gradient(160deg, #f4fbf6 0%, #e8f5ed 100%) !important;
    border: 1px solid rgba(61,176,53,0.16) !important;
    box-shadow:
        5px 5px 14px rgba(0,0,0,0.12),
        -2px -2px 6px rgba(255,255,255,0.92),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.06) !important;
    color: #1a2922 !important;
}
html.light body[data-nav-variant] .table-row-hover:hover {
    background: linear-gradient(160deg, #ffffff 0%, #eaf6ef 100%) !important;
    border-color: rgba(61,176,53,0.30) !important;
    box-shadow:
        7px 7px 20px rgba(0,0,0,0.15),
        -3px -3px 8px rgba(255,255,255,1),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.07) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL — Material Symbols dark in light mode
   Applies to ALL pages: executive, reports, CRM, warehouse,
   maputo, learn-admin, and any future pages.
   Scoped rules in nav-item / [data-side-nav] blocks above
   already handle sidebar icons; these catch everything else.
═══════════════════════════════════════════════════════════════ */
html.light .material-symbols-outlined {
  color: rgba(0,52,36,0.62) !important;
}
/* Semantic colour overrides — preserve meaning in light mode */
html.light .material-symbols-outlined.text-primary {
  color: #006b5f !important;
}
html.light .material-symbols-outlined.text-secondary {
  color: #2d6b5f !important;
}
html.light .material-symbols-outlined.text-tertiary {
  color: #b8920d !important;
}
html.light .material-symbols-outlined.text-error {
  color: #ba1a1a !important;
}
html.light .material-symbols-outlined.text-on-surface-variant {
  color: #4a635a !important;
}
html.light .material-symbols-outlined.text-outline-variant {
  color: rgba(0,52,36,0.38) !important;
}
/* Active / filled icons in top nav links */
html.light a .material-symbols-outlined,
html.light button .material-symbols-outlined {
  color: rgba(0,52,36,0.62) !important;
}
html.light a:hover .material-symbols-outlined,
html.light button:hover .material-symbols-outlined {
  color: #005c4f !important;
}

/* ============================================================
   UX-17 — Toast / feedback component
   Token-driven (dark default + html.light), prefers-reduced-motion aware.
   ============================================================ */
.toast-region {
  position: fixed;
  bottom: 84px; /* clear the dev switcher / mobile nav */
  right: 16px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--color-surface-container-highest);
  color: var(--color-on-surface);
  border: 1px solid var(--color-outline-variant);
  border-left: 3px solid var(--color-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast--enter { opacity: 1; transform: translateY(0); }
.toast--leaving { opacity: 0; transform: translateY(8px); }
.toast--success { border-left-color: var(--color-primary); }
.toast--error { border-left-color: var(--color-error); }
.toast--info { border-left-color: var(--color-tertiary); }
.toast__icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.toast--success .toast__icon { color: var(--color-primary); }
.toast--error .toast__icon { color: var(--color-error); }
.toast--info .toast__icon { color: var(--color-tertiary); }
.toast__msg {
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
  font-family: 'Manrope', sans-serif;
}
.toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.18s, color 0.18s;
}
.toast__close .material-symbols-outlined { font-size: 16px; }
.toast__close:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-on-surface); }
html.light .toast__close:hover { background: rgba(0, 0, 0, 0.06); }

/* ============================================================
   UX-6 — Loading (skeleton) / empty / error state primitives
   ============================================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-container-high);
  border-radius: 10px;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
html.light .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}
.skeleton-line { height: 14px; margin: 8px 0; }
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

.state-empty,
.state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 40px 24px;
  color: var(--color-on-surface-variant);
}
.state-empty__icon,
.state-error__icon {
  font-size: 40px;
  opacity: 0.7;
}
.state-error__icon { color: var(--color-error); }
.state-empty__title,
.state-error__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
  font-family: 'Manrope', sans-serif;
}
.state-empty__msg,
.state-error__msg {
  font-size: 13px;
  max-width: 36ch;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.001ms linear; transform: none; }
  .toast--enter, .toast--leaving { transform: none; }
  .skeleton::after { animation: none; }
}