/* ==========================================================================
   WEBLOOM SHARED DESIGN TOKENS
   Single source of truth for both webloom-login.css and webloom-admin.css.
   Premium graphite / ivory / champagne system — no blue UI tokens.
   The Webloom logo's own pixels may still contain blue/silver; that is the
   artwork, not the UI chrome, and is left untouched.
========================================================================== */

:root {
    /* ---- brand ramp ---- */
    --webloom-obsidian: #0b0b0a;
    --webloom-graphite-900: #11110f;
    --webloom-graphite-800: #181713;
    --webloom-graphite-700: #211f1a;
    --webloom-graphite-600: #2b2924;
    --webloom-graphite-500: #423f38;
    --webloom-stone-400: #5c584e;
    --webloom-stone-300: #99958c;
    --webloom-ivory-200: #d8d3c7;
    --webloom-ivory-100: #ede9de;
    --webloom-ivory-50: #f2efe8;

    --webloom-gold-900: #5b4526;
    --webloom-gold-800: #6f5730;
    --webloom-gold-700: #8d6c3d;
    --webloom-gold-600: #a17f4c;
    --webloom-gold-500: #b8945f;
    --webloom-gold-400: #caa66f;
    --webloom-gold-300: #d7bc8c;
    --webloom-gold-200: #e4d2ac;
    --webloom-gold-100: #efe4cc;

    /* raw components so rgba() calls can borrow the accent hue at any alpha */
    --accent-rgb: 184, 148, 95;

    /* ---- semantic tokens — dark is the primary Webloom identity ---- */
    --bg: var(--webloom-obsidian);
    --bg-2: var(--webloom-graphite-900);
    --sidebar: rgba(9, 9, 8, .92);

    --surface: rgba(17, 17, 15, .82);
    --surface-elevated: var(--webloom-graphite-800);
    --surface-2: var(--webloom-graphite-800);
    --surface-hover: rgba(24, 23, 19, .92);
    --surface-raised: var(--webloom-graphite-700);
    --surface-muted: var(--webloom-graphite-900);

    --border: #2b2924;
    --border-strong: rgba(var(--accent-rgb), .38);
    --border-soft: var(--border);
    --border-accent: rgba(var(--accent-rgb), .35);
    --focus-ring: rgba(var(--accent-rgb), .38);

    --text: #f2efe8;
    --text-primary: var(--text);
    --text-soft: #d8d3c7;
    --muted: #99958c;
    --text-secondary: var(--muted);

    --primary: #b8945f;
    --accent: var(--primary);
    --primary-2: #caa66f;
    --accent-hover: var(--primary-2);
    --primary-hover: var(--primary-2);
    --primary-soft: rgba(var(--accent-rgb), .12);
    --accent-soft: var(--primary-soft);
    --accent-dark: #8d6c3d;
    --accent-contrast: #171410;
    --accent-border: rgba(255, 255, 255, .1);

    --success: #4caf7d;
    --success-soft: rgba(76, 175, 125, .1);
    --danger: #e2685f;
    --danger-soft: rgba(226, 104, 95, .1);
    --warning: #e0a542;
    --warning-soft: rgba(224, 165, 66, .1);

    /* aliases kept for call sites written against these shorter names */
    --bg-soft: var(--bg-2);
    --soft: var(--text-soft);
    --green: var(--success);
    --accent-ink: var(--accent-contrast);

    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .28);
    --shadow: 0 24px 70px rgba(0, 0, 0, .4);
    --shadow-lg: 0 30px 90px rgba(0, 0, 0, .46);

    /* "Illuminated edge" recipe for premium cards — a soft depth shadow
       plus a faint warm glow ring, kept as one token so call sites just
       write `box-shadow: var(--luminous-shadow)` instead of repeating the
       two-part recipe (and drifting out of sync) at every use site. */
    --shadow-soft: var(--shadow-sm);
    --glow-soft: 0 0 28px rgba(var(--accent-rgb), .12);
    --luminous-shadow: var(--shadow-soft), var(--glow-soft);

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;

    --ease: cubic-bezier(.22, .8, .3, 1);
    --duration-fast: .16s;
    --duration: .22s;

    /* ---- customer auth background photos — the two supplied
       architectural renders (untouched originals live in /branding;
       these are byte-identical copies at a public, web-servable path).
       Which one paints depends on the theme, not the token itself: the
       Dark Mode default .auth-split rule reads --auth-bg-dark, and the
       html[data-theme="light"] .auth-split override reads
       --auth-bg-light — see webloom-public.css.
       WebP, quality 90, same 1672x941 dimensions as the PNG originals —
       visually identical, ~90% smaller (2.2MB/1.9MB -> ~240KB/190KB).
       PNGs are kept on disk as the source/fallback, not referenced by any
       token. ---- */
    --auth-bg-dark: url('/assets/webloom-public/images/auth/darkmodelogin.webp');
    --auth-bg-light: url('/assets/webloom-public/images/auth/lightmodelogin.webp');
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

html[data-theme="light"] {
    --accent-rgb: 152, 114, 68;

    /* Warm ivory/cream, not a flat grey — bg/bg-2 are deliberately more
       separated in lightness than the old #eeeae2/#f0ebe2 pair so page
       zones read as layered instead of one flat wash. */
    --bg: #f6f1e6;
    --bg-2: #efe6d3;
    --sidebar: rgba(255, 253, 248, .92);

    /* Opaque cards (not translucent-over-a-pale-bg) so they read as
       distinct surfaces instead of blending into the page. */
    --surface: #fffdf8;
    --surface-elevated: #fffaf0;
    --surface-2: #f5ecd9;
    --surface-hover: #fff7ea;
    --surface-raised: #fffefb;
    --surface-muted: #f0e6d2;

    --border: #ddd0b3;
    --border-strong: rgba(var(--accent-rgb), .42);
    --border-soft: var(--border);
    --border-accent: rgba(var(--accent-rgb), .5);
    --focus-ring: rgba(var(--accent-rgb), .32);

    --text: #1c1a15;
    --text-soft: #3d3a33;
    --muted: #6c6659;

    --primary: #9c7132;
    --primary-2: #7e5726;
    --primary-soft: rgba(var(--accent-rgb), .12);
    --accent-dark: #6b4c22;
    --accent-contrast: #fffaf0;

    --success: #2f7d55;
    --danger: #b23b32;
    --warning: #a06a1e;

    /* Was rgba(255,255,255,.16) — a highlight rim meant for dark surfaces,
       invisible against a light card/button and the main cause of
       borderless-looking "washed out" cards and buttons in light mode. */
    --accent-border: rgba(20, 16, 8, .14);

    --shadow: 0 22px 60px rgba(30, 24, 14, .14);

    /* The premium "illuminated edge" — a thin champagne hairline plus a
       faint outer glow and a soft neutral depth shadow. This is the one
       recipe every major light-mode card/panel across public, customer
       and admin shares (see --border-accent above for the hairline
       colour) — deliberately restrained: no neon, no colour-tinted large
       shadow, just enough warmth to read as "expensive" rather than lit
       up. */
    --shadow-soft: 0 14px 34px rgba(35, 27, 15, .10);
    --glow-soft: 0 0 0 1px rgba(var(--accent-rgb), .1), 0 0 34px rgba(var(--accent-rgb), .16);
    --luminous-shadow: var(--shadow-soft), var(--glow-soft);
}

/* Light mode: every navigation surface (admin sidebar/topbar, public
   navbar, customer sidebar/topbar) becomes fully light, matching the rest
   of the page — text/border/accent tokens already flip correctly on their
   own once nothing pins them dark, so this only needs to override the
   handful of hardcoded dark `background` values each of those rails
   declares in its own stylesheet. --sidebar itself is now a light token
   (see above), which is all `.sidebar`/`.customer-sidebar` need.
   The customer Login/Register cinematic panel (.auth-split in
   webloom-public.css) carries its own fully independent token scope for
   BOTH themes — a dark luxury composition and a separate light/champagne
   composition — rather than reading from :root at all, so it isn't
   affected by anything in this file. */
html[data-theme="light"] .topbar,
html[data-theme="light"] .customer-topbar {
    background: rgba(255, 253, 248, .88);
}

html[data-theme="light"] .public-nav {
    background: rgba(255, 253, 246, .85);
}

/* ==========================================================================
   SHARED THEME TOGGLE — used by both the login page and the admin shell.
   Only one of sun/moon is ever visible, driven purely by the html[data-theme]
   attribute — no JS-toggled visibility, so it's correct even before scripts
   run and immune to specificity ordering issues. Icon shows the
   DESTINATION mode: dark shows sun (switches to light), light shows moon
   (switches to dark).
========================================================================== */

.theme-toggle {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;
}

.theme-toggle svg {
    width: 19px;
    height: 19px;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

html[data-theme="light"] .theme-toggle .icon-moon {
    display: block;
}