/* Noundry Studio Showcase — root stylesheet.
 *
 * Tailwind v4 ships via the Play CDN (see _Layout) — this file hosts the
 * component CSS + dark-mode tokens + a few palette overrides. Component CSS
 * is rewritten between the begin/end markers by scripts/sync-components.ps1.
 */

/* ndui component CSS tokens — every component's *.css under components/
   defines light defaults via CSS custom properties; we override to a dark
   surface so the imported styles match the showcase shell. */
html.dark {
    --bg: #0a0a12;
    --fg: #f4f4f5;
    --muted: rgba(255,255,255,0.05);
    --muted-fg: #a1a1aa;
    --muted-hover: rgba(255,255,255,0.08);
    --border: rgba(255,255,255,0.10);
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --destructive: #ef4444;
    --destructive-hover: #dc2626;
    --ring: #6366f1;
}

/* Light-mode palette overrides for Tailwind classes we rely on that
   the Play CDN cannot post-process (e.g. non-standard arbitrary values). */
html:not(.dark) body { background: #fafafe; color: #1a1a2e; }
html:not(.dark) .bg-zinc-950 { background: #fafafe; }
html:not(.dark) .bg-zinc-950\/80 { background: rgba(250,250,254,0.85); }
html:not(.dark) .bg-zinc-950\/60 { background: #f2f2f7; }
html:not(.dark) .border-white\/10 { border-color: rgba(0,0,0,0.08); }
html:not(.dark) .border-white\/5 { border-color: rgba(0,0,0,0.05); }
html:not(.dark) .bg-white\/\[0\.02\] { background: #ffffff; }
html:not(.dark) .bg-white\/\[0\.03\] { background: #fafafc; }
html:not(.dark) .bg-white\/\[0\.04\] { background: #f5f5fa; }
html:not(.dark) .bg-white\/\[0\.06\] { background: #eeeef5; }
html:not(.dark) .text-zinc-50 { color: #0a0a1a; }
html:not(.dark) .text-zinc-100 { color: #1a1a2e; }
html:not(.dark) .text-zinc-200 { color: #2a2a3e; }
html:not(.dark) .text-zinc-300 { color: #3a3a50; }
html:not(.dark) .text-zinc-400 { color: #555570; }
html:not(.dark) .text-zinc-500 { color: #7a7a95; }

[x-cloak] { display: none !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }
html:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* ==========================================================================
   Component CSS — populated by scripts/sync-components.ps1
   Don't hand-edit between the begin/end markers.
   ndui-components: begin
   ========================================================================== */
@import url('./components/button.css');
@import url('./components/checkbox.css');
@import url('./components/command.css');
@import url('./components/datatable.css');
@import url('./components/dialog.css');
@import url('./components/input.css');
@import url('./components/sheet.css');
@import url('./components/sidebar.css');
@import url('./components/toast.css');
/* ndui-components: end */