/* ============================================================================
   WDS Hosting — shared theme tokens
   Ported verbatim from the design-component (DC) palette. Dark/light is now a
   [data-theme] swap on <html>; absent = follow the OS via prefers-color-scheme.
   Every DC style string of the form `color:${c.text}` becomes `color:var(--text)`.
   ========================================================================== */

:root {
    /* accent is theme-independent in the source */
    --accent:        oklch(74.9% 0.132 245.5);
    --accent-soft:   oklch(74.9% 0.132 245.5 / 0.9);
    --accent-dim:    oklch(74.9% 0.132 245.5 / 0.14);
    --accent-border: oklch(74.9% 0.132 245.5 / 0.4);
    --good:          oklch(65% 0.16 145);

    /* light theme (default) */
    --bg:             oklch(99% 0.002 258);
    --surface:        oklch(100% 0 0);
    --surface-raised: oklch(97% 0.003 258);
    --border:         oklch(90% 0.006 258);
    --text:           oklch(18% 0.006 258);
    --text-secondary: oklch(42% 0.012 258);
    --text-muted:     oklch(58% 0.01 258);
    --on-accent:      oklch(20% 0.02 245.5);
    --warn:           oklch(64% 0.15 70);
    --danger:         oklch(58% 0.2 25);
    --danger-tint:    oklch(58% 0.2 25 / 0.12);
    --shadow:         rgba(20, 30, 50, 0.05);
    --shadow-hover:   rgba(20, 30, 50, 0.20);
    --accent-glow:    oklch(74.9% 0.132 245.5 / 0.08);
}

/* explicit light selector so JS toggling to "light" always wins over OS */
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:             oklch(16% 0.006 258);
    --surface:        oklch(20% 0.007 258);
    --surface-raised: oklch(23% 0.008 258);
    --border:         oklch(30% 0.01 258);
    --text:           oklch(96% 0.003 258);
    --text-secondary: oklch(78% 0.01 258);
    --text-muted:     oklch(58% 0.01 258);
    --on-accent:      oklch(15% 0.01 258);
    --warn:           oklch(80% 0.13 80);
    --danger:         oklch(70% 0.17 25);
    --danger-tint:    oklch(70% 0.17 25 / 0.12);
    --shadow:         rgba(0, 0, 0, 0.35);
    --shadow-hover:   rgba(0, 0, 0, 0.55);
    --accent-glow:    oklch(74.9% 0.132 245.5 / 0.12);
}

/* follow the OS only when the user hasn't explicitly chosen a theme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg:             oklch(16% 0.006 258);
        --surface:        oklch(20% 0.007 258);
        --surface-raised: oklch(23% 0.008 258);
        --border:         oklch(30% 0.01 258);
        --text:           oklch(96% 0.003 258);
        --text-secondary: oklch(78% 0.01 258);
        --text-muted:     oklch(58% 0.01 258);
        --on-accent:      oklch(15% 0.01 258);
        --warn:           oklch(80% 0.13 80);
        --danger:         oklch(70% 0.17 25);
        --danger-tint:    oklch(70% 0.17 25 / 0.12);
        --shadow:         rgba(0, 0, 0, 0.35);
        --shadow-hover:   rgba(0, 0, 0, 0.55);
        --accent-glow:    oklch(74.9% 0.132 245.5 / 0.12);
    }
}

/* ---- base ---- */
* { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}
a { color: inherit; }
button { font-family: inherit; font-size: inherit; }
input, textarea { font-family: inherit; }
::selection { background: oklch(58% 0.19 258 / 0.3); }

@keyframes pulse-dot { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }
@keyframes blink    { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes sc-spin  { to { transform: rotate(360deg) } }

/*@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}*/

/* the page root sets the accent-glow backdrop + min height */
.page {
    min-height: 100vh;
    background: var(--bg);
    background-image: radial-gradient(85% 50% at 50% -16%, var(--accent-glow), transparent 66%);
    transition: background .2s ease;
}

/* keyboard focus floor */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- shared hover interactions (were style-hover / per-page :hover in the DC files) ---- */
.hoverable { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .16s ease, box-shadow .16s ease, filter .16s ease; }

/* The DC source used per-element :hover rules with !important because every
   control carries its colours as an inline style, and inline wins over a plain
   class rule — so without !important these hovers silently no-op. Keep it. */
.h-primary:hover   { filter: brightness(1.05) !important; box-shadow: 0 10px 24px -10px var(--accent) !important; }
.h-ghost:hover     { border-color: var(--accent) !important; background: var(--surface-raised) !important; }
.h-link:hover      { color: var(--accent) !important; }
.h-lift:hover      { transform: translateY(-1px) !important; }
.h-nav:hover       { background: var(--accent-dim) !important; color: var(--accent) !important; }
.h-menuitem:hover  { background: var(--surface-raised) !important; }
.h-userchip:hover  { border-color: var(--accent) !important; background: var(--surface-raised) !important; }
.h-logout:hover    { background: var(--danger-tint) !important; }
.h-seg:hover       { background: var(--accent-dim) !important; color: var(--text) !important; }
/* tabs keep their inline background on hover (active tabs stay accent-dim); only
   the border + text shift, matching the DC filter/tab hover. */
.h-tab:hover       { border-color: var(--accent) !important; color: var(--text) !important; }
.h-iconbtn:hover   { background: var(--surface-raised) !important; color: var(--text) !important; border-color: var(--accent) !important; }
.h-danger:hover    { background: var(--danger-tint) !important; border-color: var(--danger) !important; color: var(--danger) !important; }
.h-field:focus-within { border-color: var(--accent) !important; }

/* dashboard server cards: lift + accent ring on hover (DC `.sd-grid [role=button]:hover`) */
.h-card:hover      { transform: translateY(-3px) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent), 0 18px 40px -18px var(--shadow-hover) !important; }

/* disabled controls dim and drop their shadow on first paint, like the DC
   `.sm-pow:disabled` / `.sm-primary:disabled` rules (JS also mirrors this). */
.hoverable:disabled { opacity: .5 !important; cursor: not-allowed !important; box-shadow: none !important; filter: none !important; transform: none !important; }

/* --- per-mode logo swap -------------------------------------------------
   Renders both logos (see partials/logo.ejs); show the one matching the mode.
   Light is the default; [data-theme="dark"] forces dark; no attribute +
   prefers-color-scheme covers "system" — same rule shape as the palette. */
.wds-logo-light { display: block; }
.wds-logo-dark  { display: none; }
[data-theme="dark"] .wds-logo-light { display: none; }
[data-theme="dark"] .wds-logo-dark  { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .wds-logo-light { display: none; }
    :root:not([data-theme]) .wds-logo-dark  { display: block; }
}

@media (max-width:900px){
    .wds-nav{padding-left:20px !important;padding-right:20px !important}
}