/* Global layout: tokens, chrome, dark mode. */

:root {
            --color-v-white: #FFFFFF;
            --color-v-black: #000000;
            --color-v-gray: #737373;
            --color-v-light-gray: #E5E5E5;
        }

        html.dark {
            --color-v-white: #121014;
            --color-v-black: #D6D0C8;
            --color-v-gray: #8B8490;
            --color-v-light-gray: #2A262C;
            --night: #121014;
            --night-2: #1C191F;
            --cream: #D6D0C8;
            --mist: #8B8490;
            --sun: #B9A3C9;
            --ember: #8B6FA0;
            --line: rgba(214, 208, 200, 0.12);
        }
        
        body {
            background-color: #FFFFFF;
            color: #000000;
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }

        html.dark body {
            background-color: var(--night);
            color: var(--cream);
        }
        html.dark ::selection {
            background: var(--ember);
            color: var(--night);
        }
        
        .edit-mode-only { display: none !important; }
        body.edit-mode .edit-mode-only { display: block !important; }
        
        h1, h2, h3, h4, h5, h6 {
            overflow-wrap: normal;
            word-break: normal;
            font-family: 'JetBrains Mono', monospace;
        }
        p {
            font-family: 'Inter', sans-serif;
        }
        .font-grotesk { font-family: 'Inter', sans-serif; }
        .font-outfit, p.font-outfit { font-family: 'Outfit', sans-serif; }
        .font-mono-jb, .font-mono, .font-mono-tech { font-family: 'JetBrains Mono', monospace; }
        .font-marker { font-family: 'Inter', sans-serif; }
        
        .rule-thin {
            border-bottom: 1px solid #E5E5E5;
        }
        html.dark .rule-thin {
            border-bottom-color: var(--line);
        }

        header .brand-lockup,
        #mobile-nav-menu .brand-lockup,
        footer .brand-lockup {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            line-height: 0;
        }
        header img.brand-logo,
        #mobile-nav-menu img.brand-logo,
        footer img.brand-logo {
            height: 1.85rem;
            width: auto;
            max-height: 1.85rem;
            object-fit: contain;
            flex-shrink: 0;
            padding: 0 2px;
        }
        header .brand-wordmark,
        #mobile-nav-menu .brand-wordmark,
        footer .brand-wordmark {
            font-family: 'Ubuntu', sans-serif;
            font-weight: 700;
            font-size: 1.13rem;
            line-height: 1;
            letter-spacing: -0.01em;
            text-transform: lowercase;
            color: #3c1950;
        }
        html.dark header .brand-wordmark,
        html.dark footer .brand-wordmark,
        #mobile-nav-menu .brand-wordmark {
            color: #DED6C8;
        }
        header img.brand-logo.brand-logo--cream,
        html.dark header img.brand-logo.brand-logo--ink,
        #mobile-nav-menu img.brand-logo.brand-logo--ink,
        footer img.brand-logo.brand-logo--cream,
        html.dark footer img.brand-logo.brand-logo--ink {
            display: none;
        }
        html.dark header img.brand-logo.brand-logo--cream,
        #mobile-nav-menu img.brand-logo.brand-logo--cream,
        html.dark footer img.brand-logo.brand-logo--cream {
            display: block;
        }
        .lab-recipe-card__name {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-style: normal;
            letter-spacing: -0.01em;
            text-transform: lowercase;
            font-size: 16px;
            line-height: 1;
        }
        html[data-brand-font="instrument-serif"] .lab-recipe-card__name,
        html[data-brand-font="syne"] .lab-recipe-card__name,
        html[data-brand-font="fraunces"] .lab-recipe-card__name {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            letter-spacing: -0.01em;
            font-size: 16px;
        }
        .brand-font-cycle {
            border: 0;
            background: transparent;
            cursor: pointer;
            padding: 0 0.15rem;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            letter-spacing: 0.02em;
            color: inherit;
            opacity: 0.4;
        }
        .brand-font-cycle:hover {
            opacity: 1;
        }

        /* Minimalist structural scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #E5E5E5; }
        ::-webkit-scrollbar-thumb:hover { background: #000000; }

        /* JMB Image Treatment: Darker & desaturated on desktop, full color on hover */
        .img-stark {
            transition: filter 0.5s ease;
        }

        body.is-scrolling .img-stark {
            filter: saturate(60%) brightness(0.7) contrast(1.05) !important;
        }
        
        @media (hover: hover) {
            .img-stark {
                filter: saturate(60%) brightness(0.7) contrast(1.05);
            }
            .img-stark:hover, .group:hover .img-stark {
                filter: saturate(100%) brightness(1.0) contrast(1.0);
            }
        }

        /* Delivery & WhatsApp Float Button */
        .delivery-float {
            position: fixed;
            height: 48px;
            padding: 0 20px;
            bottom: 24px;
            right: 24px;
            background-color: #d4ff00;
            color: #111111;
            /* border: 2px solid #FACC15; */
            border-radius: 0;
            font-family: 'JetBrains Mono', monospace;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            box-shadow: none;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: all 0.2s ease;
            text-decoration: none;
        }
        .delivery-float:hover {
            background-color: #111111;
            border-color: #111111;
            color: #FFFFFF;
            transform: none;
        }

        @media (max-width: 767px) {
            .delivery-float {
                right: 12px;
                bottom: 16px;
                height: 44px;
                padding: 0 14px;
                gap: 8px;
            }
            .back-to-top {
                right: 12px;
            }
            body:has(.delivery-float) .back-to-top {
                bottom: 72px;
            }
        }

        html.dark .delivery-float {
            background-color: #8B6FA0;
            color: #121014;
            border: 1px solid #8B6FA0;
        }
        html.dark .delivery-float:hover {
            background-color: #B9A3C9;
            color: #121014;
            border-color: #B9A3C9;
        }

        html.dark header.sticky,
        html.dark footer {
            background-color: var(--night);
            color: var(--cream);
            border-color: var(--line);
        }

        html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
            color: var(--cream);
        }

        html.dark a:hover {
            color: var(--sun);
        }

        html.dark .filter-btn {
            color: var(--mist);
        }
        html.dark .filter-btn.active {
            color: var(--cream);
            border-color: var(--ember);
        }
        html.dark .filter-btn:hover {
            color: var(--sun);
        }

        html.dark button,
        html.dark .btn,
        html.dark [class*="btn-lab"],
        html.dark a.inline-flex,
        html.dark a[class*="uppercase"][class*="font-bold"] {
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        html.dark .btn-lab,
        html.dark button.border-2,
        html.dark a.border-2 {
            border-color: var(--cream);
            color: var(--cream);
            background: transparent;
        }
        html.dark .btn-lab:hover,
        html.dark button.border-2:hover,
        html.dark a.border-2:hover {
            background: var(--ember);
            border-color: var(--ember);
            color: var(--night);
        }

        html.dark .bg-v-green,
        html.dark [class*="bg-v-green"] {
            background-color: var(--ember);
            color: var(--night);
        }
        html.dark .bg-v-yellow,
        html.dark .group:hover .group-hover\:bg-v-yellow {
            background-color: #FACC15;
            color: #121014;
        }
        html.dark .bg-v-yellow.text-v-black,
        html.dark .group:hover .group-hover\:text-v-black {
            color: #121014;
        }
        html.dark .bg-v-green:hover,
        html.dark .hover\:bg-green-700:hover {
            background-color: var(--sun);
            color: var(--night);
        }

        html.dark .lab-title {
            color: var(--cream);
            border-bottom-color: var(--ember);
        }

        html.dark .lab-card {
            background-color: var(--night-2);
            color: var(--cream);
            border-left-color: var(--ember);
        }

        html.dark ::-webkit-scrollbar-thumb { background: var(--mist); }
        html.dark ::-webkit-scrollbar-thumb:hover { background: var(--sun); }

        html.dark input, html.dark textarea, html.dark select {
            background-color: var(--night-2);
            color: var(--cream);
            border-color: var(--line);
        }

        /* Nothing stays paper-white in dark mode */
        html.dark .bg-white,
        html.dark .bg-paper-white,
        html.dark .bg-gray-50,
        html.dark .bg-gray-100,
        html.dark .bg-slate-50,
        html.dark .bg-slate-100,
        html.dark .bg-off-white {
            background-color: var(--night-2);
        }
        html.dark .bg-v-white {
            background-color: var(--night);
        }
        html.dark .dark\:bg-white {
            background-color: var(--cream);
        }
        html.dark .text-white {
            color: var(--cream);
        }
        html.dark .dark\:text-black {
            color: var(--night);
        }
        html.dark .border-white,
        html.dark .border-v-white {
            border-color: var(--cream);
        }
        html.dark .hover\:bg-white:hover {
            background-color: var(--cream);
            color: var(--night);
        }
        html.dark .hover\:text-white:hover {
            color: var(--cream);
        }
        html.dark [style*="background: white"],
        html.dark [style*="background:white"],
        html.dark [style*="background: #fff"],
        html.dark [style*="background: #ffffff"],
        html.dark [style*="background: #f3f4f6"] {
            background-color: var(--night-2);
        }