/*
 * Zapped brand color system.
 * Palette: Executive Orchid.
 *
 * Purple is the brand anchor, teal is the product/status signal, and fuchsia is
 * the expressive marketing accent. Keep fuchsia mostly for gradients, charts,
 * highlights, and card art instead of body text or default product controls.
 */

:root {
    --zapp-brand-ink: #192033;
    --zapp-brand-ink-soft: #3b4458;
    --zapp-brand-muted: #68748b;
    --zapp-brand-faint: #98a2b3;
    --zapp-brand-bg: #f8f7fc;
    --zapp-brand-desk: #f5f6fb;
    --zapp-brand-surface: #ffffff;
    --zapp-brand-surface-raised: #fbfcff;
    --zapp-brand-line: rgba(25, 32, 51, .10);
    --zapp-brand-line-soft: rgba(25, 32, 51, .07);
    --zapp-brand-purple: #9920e4;
    --zapp-brand-purple-deep: #7b18b8;
    --zapp-brand-purple-wash: #f5eafd;
    --zapp-brand-fuchsia: #d946ef;
    --zapp-brand-fuchsia-wash: #ffe9f8;
    --zapp-brand-violet-wash: #ede5ff;
    --zapp-brand-teal: #16a3b8;
    --zapp-brand-teal-wash: #e9f8fb;
    --zapp-brand-cyan-wash: #dff7fb;
    --zapp-brand-success: #079669;
    --zapp-brand-success-wash: #e8f8f1;
    --zapp-brand-warning: #b66a00;
    --zapp-brand-warning-wash: #fff4df;
    --zapp-brand-blue: #2563eb;
    --zapp-brand-blue-wash: #eaf1ff;
    --zapp-brand-radius: 18px;
    --zapp-brand-radius-small: 12px;
    --zapp-brand-shadow: 0 20px 60px rgba(33, 39, 66, .08);
    --zapp-brand-shadow-soft: 0 10px 30px rgba(33, 39, 66, .06);

    --zapp-ink: var(--zapp-brand-ink);
    --zapp-ink-soft: var(--zapp-brand-ink-soft);
    --zapp-muted: var(--zapp-brand-muted);
    --zapp-faint: var(--zapp-brand-faint);
    --zapp-desk: var(--zapp-brand-desk);
    --zapp-surface: var(--zapp-brand-surface);
    --zapp-surface-raised: var(--zapp-brand-surface-raised);
    --zapp-line: var(--zapp-brand-line);
    --zapp-line-soft: var(--zapp-brand-line-soft);
    --zapp-purple: var(--zapp-brand-purple);
    --zapp-purple-deep: var(--zapp-brand-purple-deep);
    --zapp-purple-wash: var(--zapp-brand-purple-wash);
    --zapp-fuchsia: var(--zapp-brand-fuchsia);
    --zapp-fuchsia-wash: var(--zapp-brand-fuchsia-wash);
    --zapp-pink: var(--zapp-brand-fuchsia);
    --zapp-pink-wash: var(--zapp-brand-fuchsia-wash);
    --zapp-violet-wash: var(--zapp-brand-violet-wash);
    --zapp-signal: var(--zapp-brand-teal);
    --zapp-signal-wash: var(--zapp-brand-teal-wash);
    --zapp-cyan-wash: var(--zapp-brand-cyan-wash);
    --zapp-green: var(--zapp-brand-success);
    --zapp-green-wash: var(--zapp-brand-success-wash);
    --zapp-amber: var(--zapp-brand-warning);
    --zapp-amber-wash: var(--zapp-brand-warning-wash);
    --zapp-blue: var(--zapp-brand-blue);
    --zapp-blue-wash: var(--zapp-brand-blue-wash);
    --zapp-radius: var(--zapp-brand-radius);
    --zapp-radius-small: var(--zapp-brand-radius-small);
    --zapp-shadow: var(--zapp-brand-shadow);
    --zapp-shadow-soft: var(--zapp-brand-shadow-soft);
}

body.app,
body.zapped-hybrid-homepage {
    --primary: var(--zapp-brand-purple);
    --primary-rgb: 153, 32, 228;
    --primary-100: var(--zapp-brand-purple-wash);
    --primary-600: var(--zapp-brand-purple-deep);
    --primary-900: var(--zapp-brand-purple-deep);
}

body.app[data-theme-style="dark"] {
    --zapp-ink: #eef2ff;
    --zapp-ink-soft: #d6dbea;
    --zapp-muted: #aab3c4;
    --zapp-faint: #778297;
    --zapp-desk: #111522;
    --zapp-surface: #171c2b;
    --zapp-surface-raised: #1d2333;
    --zapp-line: rgba(238, 242, 255, .12);
    --zapp-line-soft: rgba(238, 242, 255, .08);
    --zapp-purple-bright: #b146f5;
    --zapp-purple-wash: rgba(153, 32, 228, .18);
    --zapp-fuchsia-wash: rgba(217, 70, 239, .16);
    --zapp-pink-wash: rgba(217, 70, 239, .16);
    --zapp-signal-wash: rgba(22, 163, 184, .14);
    --zapp-green-wash: rgba(7, 150, 105, .18);
    --zapp-amber-wash: rgba(182, 106, 0, .18);
    --zapp-blue-wash: rgba(37, 99, 235, .18);
    --zapp-shadow: 0 24px 60px rgba(0, 0, 0, .42), 0 2px 6px rgba(0, 0, 0, .22);
    --zapp-shadow-soft: 0 10px 30px rgba(0, 0, 0, .3);
}