/* ZHI global design tokens — light shell + aliases for product pages + Engine (dark) refs */

:root {
    /* Brand (marketing / chrome) */
    --zealic-purple: #6b38fb;
    --zealic-cyan: #2ad1ed;
    --zealic-vivid: #bc00ff;

    /* Surfaces — light default */
    --bg-base: #f8fafc;
    --bg-marketing: #f4f7f9;
    --bg-card: #ffffff;
    --text-main: #0f172a;
    --text-soft: #64748b;
    --glass-surface: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --shadow-premium: 0 20px 40px -12px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.02);
    --card-shadow: 0 12px 40px rgba(188, 0, 255, 0.08);

    /* Aliases — SiteOS / MindfulOS / SupportOS / legacy marketing */
    --siteos-cyan: var(--zealic-cyan);
    --siteos-purple: var(--zealic-vivid);
    --siteos-blue: #7b66f6;
    --siteos-black: #0a0a0a;
    --bg-main: var(--bg-marketing);
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --brand-gradient: linear-gradient(
        135deg,
        var(--siteos-cyan) 0%,
        var(--siteos-blue) 50%,
        var(--siteos-purple) 100%
    );

    /* Engine / dark mode (use in page-level CSS; does not switch body by itself) */
    --zhi-dark-bg: #0a0a0a;
    --zhi-dark-surface: #121214;
    --zhi-dark-text: #ffffff;
    --zhi-dark-muted: #94a3b8;
    --zhi-dark-border: rgba(255, 255, 255, 0.1);
    --zhi-dark-glass: rgba(10, 10, 10, 0.7);
}