/*
 * StatSwift brand theme — enabled per environment by [instance].theme_css_url
 * (environments/statswift.*.toml). The engine itself stays brand-neutral: it only
 * links this file and marks <html data-brand> at build time (vite/engine-projection-plugin.ts).
 *
 * Values follow the StatSwift product palette (eset/COLOR_PALETTE.md, eset/CHART_DESIGN.md):
 * white work surfaces, soft-gray canvas/navigation, near-black titles, blue for actions
 * and selection. Tokens (src/style.css) carry the palette; the few layout rules at the end
 * of the file target only data-slot hooks the engine exposes for this purpose.
 *
 * Specificity: html[data-brand] (0,1,1) beats :root / .dark / [data-theme] (0,1,0) and
 * html[data-brand].dark (0,2,1) beats [data-theme].dark (0,2,0), so this file wins
 * regardless of load order against the app bundle.
 */

html[data-brand] {
    font-family:
        'Inter Variable',
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    --radius: 0.5rem; /* cards 8px, controls (radius-md) 6px */

    --background: #ffffff; /* surface — top bar and page content stay white */
    --foreground: #242933; /* text */
    --card: #ffffff; /* surface */
    --card-foreground: #242933;
    --popover: #ffffff;
    --popover-foreground: #242933;

    --primary: #1769d2; /* action */
    --primary-foreground: #ffffff;
    --secondary: #eff1f4; /* hover */
    --secondary-foreground: #171a21; /* heading */
    --muted: #f8f9fb; /* subtle */
    --muted-foreground: #5f6875; /* muted */
    --accent: #eff1f4; /* neutral hover */
    --accent-foreground: #171a21;
    --destructive: #b4233b; /* error */

    --border: #e2e5ea; /* border */
    --input: #8b93a1; /* controlBorder */
    --ring: #1769d2; /* accent / focus */

    --chart-1: #1769d2; /* blue */
    --chart-2: #b65c16; /* orange */
    --chart-3: #087f8c; /* teal */
    --chart-4: #7651b5; /* violet */
    --chart-5: #ad4779; /* magenta */

    --sidebar: #f8f9fb; /* sidebar */
    --sidebar-foreground: #242933;
    --sidebar-primary: #1769d2;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #e8f1ff; /* selection */
    --sidebar-accent-foreground: #1256b0; /* actionHover */
    --sidebar-border: #e2e5ea;
    --sidebar-ring: #1769d2;

    --success: #16704a; /* success */
    --success-soft: #edf8f1; /* successBg */
    --success-soft-foreground: #16704a;
    --success-border: #c3e6d1;
    --warning: #855900; /* warning */
    --warning-soft: #fff7e6; /* warningBg */
    --warning-soft-foreground: #855900;
    --warning-border: #f2dcae;
    --info: #1256b0; /* info */
    --info-soft: #eff6ff; /* infoBg */
    --info-soft-foreground: #1256b0;
    --info-border: #c9ddf8;
}

/*
 * The product palette is light-only; this dark variant keeps its structure (neutral
 * grays, blue only for interaction) on the near-black `heading` hue.
 */
html[data-brand].dark {
    --background: #111419;
    --foreground: #e6e8ec;
    --card: #171a21;
    --card-foreground: #e6e8ec;
    --popover: #171a21;
    --popover-foreground: #e6e8ec;

    --primary: #2f7be0;
    --primary-foreground: #ffffff;
    --secondary: #242933;
    --secondary-foreground: #e6e8ec;
    --muted: #1d2129;
    --muted-foreground: #9aa3b0;
    --accent: #242933;
    --accent-foreground: #e6e8ec;
    --destructive: #e0566b;

    --border: rgb(255 255 255 / 10%);
    --input: rgb(255 255 255 / 18%);
    --ring: #4a90e8;

    --chart-1: #4a90e8;
    --chart-2: #d97a33;
    --chart-3: #2aa3b0;
    --chart-4: #9a7bd6;
    --chart-5: #cf6a9b;

    --sidebar: #14171d;
    --sidebar-foreground: #e6e8ec;
    --sidebar-primary: #4a90e8;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: rgb(23 105 210 / 22%);
    --sidebar-accent-foreground: #9cc2f5;
    --sidebar-border: rgb(255 255 255 / 10%);
    --sidebar-ring: #4a90e8;

    --success: #4cc38a;
    --success-soft: rgb(22 112 74 / 22%);
    --success-soft-foreground: #8fddb5;
    --success-border: rgb(76 195 138 / 30%);
    --warning: #e0a83a;
    --warning-soft: rgb(133 89 0 / 25%);
    --warning-soft-foreground: #f2cd85;
    --warning-border: rgb(224 168 58 / 30%);
    --info: #6aa6f0;
    --info-soft: rgb(23 105 210 / 22%);
    --info-soft-foreground: #9cc2f5;
    --info-border: rgb(74 144 232 / 30%);
}

/*
 * Layout touches — hooks: data-slot attributes in DashboardLayout / AdminPanelDashboardLayout
 * (dashboard-top-bar, dashboard-container) and OrgSwitcher (org-switcher). The engine keeps its
 * own defaults (no top bar rule, py-16, text-base switcher); these rules sit outside any
 * @layer, so they beat the Tailwind utilities (layer `utilities`) on the same elements.
 * Literal values, not Tailwind theme variables: v4 emits only the variables the app uses.
 */

/* Rule under the dashboard top bar (only the dashboard layouts — auth and pricing stay bare). */
html[data-brand] [data-slot='dashboard-top-bar'] {
    border-bottom: 1px solid var(--border);
}

/* More air between the fixed top bar and the dashboard content (engine default: 4rem). */
html[data-brand] [data-slot='dashboard-container'] {
    padding-top: 5.5rem;
}

/* Org switcher sized to sit level with the logo and wordmark (engine default: text-base). */
html[data-brand] [data-slot='org-switcher'] {
    padding-inline: 0.625rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 400;
}

html[data-brand] [data-slot='org-switcher'] > svg {
    width: 1rem;
    height: 1rem;
}