/* =============================================================================
   VAULT DESIGN SYSTEM — tokens
   Modes:   html[data-vault-mode="dark|light"]
   Presets: html[data-vault-preset="vault-gold|emerald|crimson|royal"]
   Everything in the theme AND the plugin-skin bridge reads these tokens.
   ============================================================================= */

/* ── Typography + appearance (overridable via Vault Options → Typography) ── */
:root{
	--vt-font-head:"Saira",system-ui,sans-serif;
	--vt-font-body:"Inter",system-ui,sans-serif;
	--vt-font-mono:"Space Mono",ui-monospace,monospace;
	--vt-base-size:16px;      /* body font size */
	--vt-head-weight:800;     /* heading weight */
	--vt-head-spacing:-.02em; /* heading letter-spacing */
	--vt-radius:16px;         /* card/control corner radius */
	--vt-section-space:100px; /* vertical rhythm between sections */
	/* legacy aliases — keep older rules on the same fonts */
	--v-font-display:var(--vt-font-head);
	--v-font-ui:var(--vt-font-body);
}

/* ── Accent presets (mode-independent) ── */
:root, html[data-vault-preset="vault-gold"]{
	--vt-accent:#e7c877; --vt-accent-2:#b8860b; --vt-accent-ink:#20160a;
	--vt-accent-soft:rgba(231,200,119,.14); --vt-accent-line:rgba(231,200,119,.32);
}
html[data-vault-preset="emerald"]{
	--vt-accent:#34d399; --vt-accent-2:#059669; --vt-accent-ink:#02140c;
	--vt-accent-soft:rgba(52,211,153,.14); --vt-accent-line:rgba(52,211,153,.32);
}
html[data-vault-preset="crimson"]{
	--vt-accent:#f87171; --vt-accent-2:#dc2626; --vt-accent-ink:#1a0505;
	--vt-accent-soft:rgba(248,113,113,.14); --vt-accent-line:rgba(248,113,113,.32);
}
html[data-vault-preset="royal"]{
	--vt-accent:#60a5fa; --vt-accent-2:#2563eb; --vt-accent-ink:#050d1c;
	--vt-accent-soft:rgba(96,165,250,.14); --vt-accent-line:rgba(96,165,250,.32);
}
html[data-vault-preset="violet"]{
	--vt-accent:#c084fc; --vt-accent-2:#7c3aed; --vt-accent-ink:#160726;
	--vt-accent-soft:rgba(192,132,252,.14); --vt-accent-line:rgba(192,132,252,.32);
}
html[data-vault-preset="cyan"]{
	--vt-accent:#22d3ee; --vt-accent-2:#0891b2; --vt-accent-ink:#03191d;
	--vt-accent-soft:rgba(34,211,238,.14); --vt-accent-line:rgba(34,211,238,.32);
}
html[data-vault-preset="orange"]{
	--vt-accent:#ff7a1a; --vt-accent-2:#ff3d00; --vt-accent-ink:#2a1200;
	--vt-accent-soft:rgba(255,122,26,.16); --vt-accent-line:rgba(255,122,26,.34);
}

/* ── DARK mode surfaces (default) ── */
:root, html[data-vault-mode="dark"]{
	--vt-canvas:#0b0c0f; --vt-surface:#14161b; --vt-raised:#1d2027; --vt-input:#191b21;
	--vt-line:rgba(255,255,255,.09); --vt-line-strong:rgba(255,255,255,.16);
	--vt-text:#f3efe6; --vt-muted:#a4a091; --vt-faint:#75726a;
	--vt-shadow:0 24px 60px -24px rgba(0,0,0,.8);
	--vt-win:#22c55e; --vt-win-bg:rgba(34,197,94,.14);
	--vt-loss:#f04747; --vt-loss-bg:rgba(240,71,71,.14);
	--vt-push:#eab308; --vt-push-bg:rgba(234,179,8,.12);
	--vt-pending:#f0b429; --vt-pending-bg:rgba(240,180,41,.12);
	--vt-void:#a78bfa; --vt-void-bg:rgba(167,139,250,.12);
	color-scheme:dark;
}

/* ── LIGHT mode surfaces ── */
html[data-vault-mode="light"]{
	--vt-canvas:#f4f3f0; --vt-surface:#ffffff; --vt-raised:#faf9f6; --vt-input:#ffffff;
	--vt-line:rgba(15,18,22,.10); --vt-line-strong:rgba(15,18,22,.18);
	--vt-text:#171a1f; --vt-muted:#5c6066; --vt-faint:#8f939a;
	--vt-shadow:0 24px 50px -26px rgba(20,22,26,.35);
	--vt-win:#15803d; --vt-win-bg:rgba(21,128,61,.12);
	--vt-loss:#b91c1c; --vt-loss-bg:rgba(185,28,28,.10);
	--vt-push:#a16207; --vt-push-bg:rgba(161,98,7,.10);
	--vt-pending:#b45309; --vt-pending-bg:rgba(180,83,9,.10);
	--vt-void:#7c3aed; --vt-void-bg:rgba(124,58,237,.10);
	color-scheme:light;
}

/* ── Map legacy --v-* names (existing vault.css) onto the tokens ── */
body.vault-theme{
	--v-canvas:var(--vt-canvas); --v-panel:var(--vt-surface); --v-raised:var(--vt-raised);
	--v-line:var(--vt-line); --v-gold:var(--vt-accent); --v-gold-deep:var(--vt-accent-2);
	--v-text:var(--vt-text); --v-muted:var(--vt-muted); --v-faint:var(--vt-faint);
	--v-win:var(--vt-win); --v-loss:var(--vt-loss); --v-shadow:var(--vt-shadow);
	--v-glow:0 0 0 1px var(--vt-accent-line), 0 12px 32px -12px var(--vt-accent-soft);
	background:var(--vt-canvas); color:var(--vt-text);
}
body.vault-theme .vault-btn--gold{ color:var(--vt-accent-ink); }

/* Smooth scrolling (gated by body class from options) */
html.vault-smooth{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html.vault-smooth{ scroll-behavior:auto; } }