/* Design tokens for the redesign. Loaded only by the preview layout for now. */
:root {
    --pv-blue: #1668e3;
    --pv-blue-hover: #0f52bc;
    --pv-blue-soft: #e8f0fd;
    --pv-ink: #0b1220;
    --pv-ink-soft: #2a3342;
    --pv-muted: #5b6577;
    --pv-border: #e2e6ed;
    --pv-surface: #ffffff;
    --pv-page: #eceff4;
    --pv-card-border: #c9d1de;
    --pv-card-shadow: 0 1px 2px rgba(11, 18, 32, 0.08), 0 6px 16px rgba(11, 18, 32, 0.08);
    --pv-card-shadow-hover: 0 2px 4px rgba(11, 18, 32, 0.1), 0 12px 28px rgba(22, 104, 227, 0.18);
    --pv-danger: #d92d20;
    --pv-container: 1200px;
    --pv-gutter: 1.25rem;
    --pv-radius: 8px;
    --pv-shadow: 0 1px 2px rgba(11, 18, 32, 0.06), 0 4px 14px rgba(11, 18, 32, 0.06);
    --pv-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

/* Optional light base so unrestyled sections below the new pieces read as light. */
html[data-pv-base="light"] {
    --bg: var(--pv-page);
    --bg-elevated: var(--pv-surface);
    --border: var(--pv-border);
    --text: var(--pv-ink);
    --text-muted: var(--pv-muted);
    --brand: var(--pv-blue);
    --brand-hover: var(--pv-blue-hover);
}

body.pv main.container {
    max-width: var(--pv-container);
    padding-left: var(--pv-gutter);
    padding-right: var(--pv-gutter);
}