/**
 * Vercel theme pack
 * Activates when html[data-theme-pack="vercel"]; default mode is dark.
 * Sourced from /home/ubuntu/skysuite-core/app/static/site/styles.css.
 *
 * Tokens are declared (the marketing-site palette) and then mapped onto the
 * legacy --sky-*, --ds-*, --bs-* tokens so the existing chrome themes itself
 * automatically.
 */

/* ──────────────────────────────────────────────────────────────────
   DARK (default)
   ────────────────────────────────────────────────────────────────── */
html[data-theme-pack="vercel"] {
    /* Marketing tokens (verbatim) */
    --bg: #000;
    --bg-1: #0a0a0a;
    --bg-2: #111111;
    --bg-3: #171717;
    --line: rgba(255,255,255,0.09);
    --line-2: rgba(255,255,255,0.16);
    --ink: #ededed;
    --ink-2: #a1a1a1;
    --ink-3: #707070;
    --ink-4: #444;
    --accent: #ff00ae;
    --accent-rgb: 255, 0, 174;
    --good: #0070f3;
    --good-2: #50e3c2;
    --maxw: 1200px;
    --pad: clamp(16px, 2vw, 28px);
    --r: 10px;

    /* ── Map to --sky-* legacy tokens ── */
    --sky-primary: var(--accent);
    --sky-primary-rgb: var(--accent-rgb);
    --sky-accent: var(--accent);
    --sky-bg: var(--bg);
    --sky-surface: var(--bg-1);
    --sky-surface-hover: var(--bg-2);
    --sky-border: var(--line);
    --sky-text: var(--ink);
    --sky-text-muted: var(--ink-2);
    --sky-sidebar-bg: var(--bg-1);
    --sky-sidebar-text: var(--ink-2);
    --sky-sidebar-active: var(--accent);
    --sky-sidebar-hover: var(--bg-2);
    --sky-tab-bg: var(--bg-2);
    --sky-tab-active-bg: var(--bg-1);
    --sky-tab-text: var(--ink-2);
    --sky-tab-active-text: var(--ink);

    /* ── Map to Bootstrap --bs-* tokens ── */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink);
    --bs-secondary-bg: var(--bg-1);
    --bs-tertiary-bg: var(--bg-2);
    --bs-secondary-color: var(--ink-2);
    --bs-border-color: var(--line);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--bg-2);
    --bs-modal-bg: var(--bg-1);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent);
    --bs-emphasis-color: var(--ink);

    /* ── Map to drone-suite --ds-* tokens ── */
    --ds-primary: var(--accent);
    --ds-primary-dark: var(--accent);
    --ds-primary-light: var(--accent);
    --ds-primary-subtle: rgba(255, 0, 174, 0.14);
    --ds-accent: var(--accent);
    --ds-accent-dark: var(--accent);
    --ds-accent-light: var(--accent);
    --ds-gray-50: var(--bg);
    --ds-gray-100: var(--bg-1);
    --ds-gray-200: var(--bg-2);
    --ds-gray-300: var(--bg-3);
    --ds-gray-400: var(--ink-4);
    --ds-gray-500: var(--ink-3);
    --ds-gray-600: var(--ink-2);
    --ds-gray-700: var(--ink-2);
    --ds-gray-800: var(--ink);
    --ds-gray-900: var(--ink);
    --ds-glass-bg: rgba(10, 10, 10, 0.82);
    --ds-glass-border: var(--line);
    --ds-glass-blur: 14px;
    --ds-glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    --ds-page-bg: var(--bg);
    --ds-page-bg-fallback: var(--bg);
    --ds-text: var(--ink);
    --ds-text-secondary: var(--ink-2);
    --ds-text-muted: var(--ink-3);
    --ds-success: var(--good-2);
    --ds-warning: #f5a524;
    --ds-danger: #ff4d6d;
    --ds-info: var(--good);

    /* Nav widget tokens (skysuite-nav.css) */
    --nav-bg: var(--bg-1);
    --nav-sub-bg: var(--bg-2);
    --nav-border: var(--line);
    --nav-text: var(--ink-2);
    --nav-text-hover: var(--ink);
    --nav-text-active: var(--ink);
    --nav-brand: var(--accent);
    --nav-active: var(--accent);
    --nav-active-bg: rgba(255, 0, 174, 0.14);
    --nav-dd-bg: var(--bg-1);
    --nav-dd-border: var(--line);
    --nav-dd-text: var(--ink-2);
    --nav-dd-hover-bg: rgba(255, 0, 174, 0.14);
    --nav-dd-active: var(--accent);
    --nav-sub-title: var(--accent);
    --nav-pg-active-border: var(--accent);

    /* ── Semantic tokens (chrome-wide) ── */
    --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --theme-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --theme-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
    --theme-overlay: rgba(0, 0, 0, 0.6);
    --theme-muted-surface: rgba(255, 255, 255, 0.04);
    --theme-focus-ring: var(--accent);
    --theme-accent-soft: color-mix(in oklab, var(--accent) 14%, transparent);
    --theme-glass-bg: color-mix(in oklab, var(--bg-1) 88%, transparent);
    --theme-glass-border: var(--line);

    /* Status palette (vercel: magenta accent, cyan info, vivid red/green/amber) */
    --theme-success: #22c55e;
    --theme-success-bg: rgba(34, 197, 94, 0.14);
    --theme-success-fg: #4ade80;
    --theme-danger: #ff4d6d;
    --theme-danger-bg: rgba(255, 77, 109, 0.16);
    --theme-danger-fg: #ff6b85;
    --theme-warning: #f5a524;
    --theme-warning-bg: rgba(245, 165, 36, 0.16);
    --theme-warning-fg: #fbbf24;
    --theme-info: #06b6d4;
    --theme-info-bg: rgba(6, 182, 212, 0.16);
    --theme-info-fg: #22d3ee;

    /* Bootstrap status mappings */
    --theme-bs-success: var(--theme-success);
    --theme-bs-danger: var(--theme-danger);
    --theme-bs-warning: var(--theme-warning);
    --theme-bs-info: var(--theme-info);
    --bs-success: var(--theme-bs-success);
    --bs-danger: var(--theme-bs-danger);
    --bs-warning: var(--theme-bs-warning);
    --bs-info: var(--theme-bs-info);
    --bs-success-rgb: 34, 197, 94;
    --bs-danger-rgb: 255, 77, 109;
    --bs-warning-rgb: 245, 165, 36;
    --bs-info-rgb: 6, 182, 212;

    /* ── Bootstrap component overrides (derived from tokens) ── */
    --bs-btn-bg: var(--bg-2);
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--line-2);
    --bs-alert-bg: var(--bg-1);
    --bs-alert-color: var(--ink);
    --bs-alert-border-color: var(--line);
    --bs-dropdown-bg: var(--bg-1);
    --bs-dropdown-color: var(--ink);
    --bs-dropdown-link-color: var(--ink-2);
    --bs-dropdown-link-hover-color: var(--ink);
    --bs-dropdown-link-hover-bg: var(--theme-accent-soft);
    --bs-dropdown-border-color: var(--line);
    --bs-form-control-bg: var(--bg-1);
    --bs-form-control-color: var(--ink);
    --bs-form-control-disabled-bg: var(--bg-2);
    --bs-card-bg: var(--bg-1);
    --bs-card-border-color: var(--line);
    --bs-card-cap-bg: var(--bg-2);
    --bs-modal-border-color: var(--line);
    --bs-modal-header-border-color: var(--line);
    --bs-modal-footer-border-color: var(--line);
    --bs-nav-tabs-link-active-bg: var(--bg-1);
    --bs-nav-tabs-link-active-color: var(--ink);
    --bs-nav-tabs-border-color: var(--line);
    --bs-list-group-bg: var(--bg-1);
    --bs-list-group-color: var(--ink);
    --bs-list-group-border-color: var(--line);
    --bs-list-group-active-bg: var(--accent);
    --bs-list-group-active-color: #fff;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: var(--bg-1);
    --bs-heading-color: var(--ink);

    color-scheme: dark;
}

/* Body font + ::selection for vercel pack (regardless of mode) */
html[data-theme-pack="vercel"] body {
    font-family: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
}
html[data-theme-pack="vercel"] .mono,
html[data-theme-pack="vercel"] code,
html[data-theme-pack="vercel"] pre,
html[data-theme-pack="vercel"] kbd,
html[data-theme-pack="vercel"] samp {
    font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0;
}
html[data-theme-pack="vercel"] ::selection { background: var(--accent); color: #fff; }

/* ──────────────────────────────────────────────────────────────────
   LIGHT
   ────────────────────────────────────────────────────────────────── */
html[data-theme-pack="vercel"][data-theme-mode="light"] {
    --bg: #fff;
    --bg-1: #fafafa;
    --bg-2: #f4f4f4;
    --bg-3: #ededed;
    --line: rgba(0,0,0,0.09);
    --line-2: rgba(0,0,0,0.16);
    --ink: #0a0a0a;
    --ink-2: #525252;
    --ink-3: #888;
    --ink-4: #b3b3b3;
    /* accent stays the same for brand consistency */

    /* Semantic tokens — light tuning */
    --theme-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --theme-shadow-md: 0 6px 18px rgba(15, 17, 23, 0.10), 0 1px 3px rgba(15, 17, 23, 0.06);
    --theme-shadow-lg: 0 16px 40px rgba(15, 17, 23, 0.14), 0 2px 6px rgba(15, 17, 23, 0.08);
    --theme-overlay: rgba(15, 17, 23, 0.5);
    --theme-muted-surface: rgba(15, 17, 23, 0.04);
    --theme-focus-ring: var(--accent);
    --theme-accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
    --theme-glass-bg: color-mix(in oklab, var(--bg) 90%, transparent);
    --theme-glass-border: var(--line);

    --theme-success: #16a34a;
    --theme-success-bg: rgba(22, 163, 74, 0.12);
    --theme-success-fg: #15803d;
    --theme-danger: #dc2626;
    --theme-danger-bg: rgba(220, 38, 38, 0.10);
    --theme-danger-fg: #b91c1c;
    --theme-warning: #d97706;
    --theme-warning-bg: rgba(217, 119, 6, 0.12);
    --theme-warning-fg: #b45309;
    --theme-info: #0891b2;
    --theme-info-bg: rgba(8, 145, 178, 0.12);
    --theme-info-fg: #0e7490;

    --theme-bs-success: var(--theme-success);
    --theme-bs-danger: var(--theme-danger);
    --theme-bs-warning: var(--theme-warning);
    --theme-bs-info: var(--theme-info);
    --bs-success: var(--theme-bs-success);
    --bs-danger: var(--theme-bs-danger);
    --bs-warning: var(--theme-bs-warning);
    --bs-info: var(--theme-bs-info);
    --bs-success-rgb: 22, 163, 74;
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning-rgb: 217, 119, 6;
    --bs-info-rgb: 8, 145, 178;

    --bs-btn-bg: #fff;
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--line-2);
    --bs-alert-bg: #fff;
    --bs-alert-color: var(--ink);
    --bs-alert-border-color: var(--line);
    --bs-dropdown-bg: #fff;
    --bs-dropdown-color: var(--ink);
    --bs-dropdown-link-color: var(--ink-2);
    --bs-dropdown-link-hover-color: var(--ink);
    --bs-dropdown-link-hover-bg: var(--theme-accent-soft);
    --bs-dropdown-border-color: var(--line);
    --bs-form-control-bg: #fff;
    --bs-form-control-color: var(--ink);
    --bs-form-control-disabled-bg: var(--bg-2);
    --bs-card-bg: #fff;
    --bs-card-border-color: var(--line);
    --bs-card-cap-bg: var(--bg-1);
    --bs-modal-bg: #fff;
    --bs-modal-border-color: var(--line);
    --bs-modal-header-border-color: var(--line);
    --bs-modal-footer-border-color: var(--line);
    --bs-nav-tabs-link-active-bg: #fff;
    --bs-nav-tabs-link-active-color: var(--ink);
    --bs-nav-tabs-border-color: var(--line);
    --bs-list-group-bg: #fff;
    --bs-list-group-color: var(--ink);
    --bs-list-group-border-color: var(--line);
    --bs-list-group-active-bg: var(--accent);
    --bs-list-group-active-color: #fff;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: var(--bg-1);
    --bs-heading-color: var(--ink);

    color-scheme: light;
}