/**
 * Veeble design tokens — single source of truth.
 * Scoped on body.lagom so Lagom markup + Veeble components share the same palette.
 * Safe from Lagom updates (lives under templates/lagom2/veeble/).
 */

body.lagom {
    /* Brand */
    --veeble-blue: #324ff5;
    --veeble-blue-dark: #263fd4;
    --veeble-blue-light: #eef1ff;
    --veeble-blue-pale: #f6f8ff;
    --veeble-green: #38f37a;
    --veeble-green-light: #eafff1;
    --veeble-green-soft: var(--veeble-green-light);
    --veeble-blue-soft: var(--veeble-blue-light);

    /* Surfaces */
    --veeble-bg: #f7f8fc;
    --dashboard-bg: var(--veeble-bg);
    --card-bg: #ffffff;
    --veeble-surface: #ffffff;

    /* Text */
    --veeble-text: #111827;
    --veeble-text-secondary: #667085;
    --veeble-text-muted: #98a2b3;
    --veeble-muted: var(--veeble-text-secondary);
    --text-dark: var(--veeble-text);
    --text-medium: var(--veeble-text-secondary);
    --text-light: var(--veeble-text-muted);
    --veeble-black: #111111;

    /* Borders / radius / shadow */
    --veeble-border: #e6e8ef;
    --border-color: var(--veeble-border);
    --radius-lg: 14px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.04);
    --shadow-hover: 0 6px 20px rgba(16, 24, 40, 0.08);

    /* Status */
    --success: #12b76a;
    --success-bg: #ecfdf3;
    --warning: #f79009;
    --warning-bg: #fffaeb;
    --danger: #f04438;
    --danger-bg: #fef3f2;
    --info: var(--veeble-blue);
    --info-bg: var(--veeble-blue-light);

    /* Nav aliases (sidebar-nav.css) */
    --veeble-nav-blue: var(--veeble-blue);
    --veeble-nav-blue-soft: rgba(50, 79, 245, 0.05);
    --veeble-nav-text: var(--veeble-text);
    --veeble-nav-muted: #777777;
    --veeble-nav-accent: var(--veeble-green);
    --veeble-nav-radius: var(--radius-sm);

    /* Spacing (compact SaaS) */
    --veeble-space-1: 4px;
    --veeble-space-2: 8px;
    --veeble-space-3: 12px;
    --veeble-space-4: 16px;
    --veeble-space-5: 20px;
    --veeble-space-6: 24px;

    /* Typography */
    --veeble-font: inherit;
    --veeble-title-size: 28px;
    --veeble-title-size-sm: 22px;
    --veeble-body-size: 14px;

    /* Legacy list aliases (table-list.css / status pills) */
    --inv-black: var(--veeble-text);
    --inv-muted: var(--veeble-text-secondary);
    --inv-line: var(--veeble-border);
    --inv-blue: var(--veeble-blue);
    --inv-blue-soft: var(--veeble-blue-light);
    --inv-green: var(--veeble-green);
    --inv-green-soft: var(--veeble-green-light);
    --inv-page: var(--veeble-bg);
    --inv-card: var(--card-bg);
}

/* Portal canvas for logged-in client area */
body.lagom.page-user-logged {
    background: var(--veeble-bg) !important;
    color: var(--veeble-text);
}