/* SyncCore theme tokens — Kapella design language
   Source of truth (C#): Tokens/KapellaPalette.cs, Tokens/DesignTokens.cs */

:root {
    /* Typography */
    --app-ds-font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --app-ds-font-size-xs: 0.75rem;
    --app-ds-font-size-sm: 0.8125rem;
    --app-ds-font-size-base: 0.875rem;
    --app-ds-font-size-md: 1rem;
    --app-ds-font-size-lg: 1.125rem;
    --app-ds-font-size-xl: 1.25rem;
    --app-ds-font-size-2xl: 1.5rem;
    --app-ds-line-height-tight: 1.25;
    --app-ds-line-height-normal: 1.5;
    --app-ds-letter-spacing-tight: -0.02em;
    --app-ds-letter-spacing-caps: 0.05em;

    /* Brand */
    --app-ds-color-primary: #464dee;
    --app-ds-color-primary-hover: #3a3ed4;
    --app-ds-color-primary-active: #3338c4;
    --app-ds-color-primary-soft: rgba(70, 77, 238, 0.12);
    --app-ds-color-secondary: #6c7293;
    --app-ds-color-secondary-muted: #aab2bd;
    --app-ds-color-accent: #0ad7f7;
    --app-ds-gradient-brand: linear-gradient(230deg, #759bff, #464dee);

    /* Semantic */
    --app-ds-color-success: #0ddbb9;
    --app-ds-color-success-soft: rgba(13, 219, 185, 0.12);
    --app-ds-color-info: #0ad7f7;
    --app-ds-color-info-soft: rgba(10, 215, 247, 0.12);
    --app-ds-color-warning: #fcd53b;
    --app-ds-color-warning-soft: rgba(252, 213, 59, 0.18);
    --app-ds-color-danger: #ee5b5b;
    --app-ds-color-danger-soft: rgba(238, 91, 91, 0.12);

    /* Text */
    --app-ds-text-primary: #001737;
    --app-ds-text-secondary: #6c7293;
    --app-ds-text-muted: #a7afb7;
    --app-ds-text-on-primary: #ffffff;

    /* Surfaces */
    --app-ds-bg-content: #f0f3f6;
    --app-ds-bg-muted: #e8eff4;
    --app-ds-bg-surface: #ffffff;
    --app-ds-bg-elevated: #ffffff;
    --app-ds-bg-surface-hover: #f6f8fa;

    /* Borders & dividers */
    --app-ds-border: #e7eaed;
    --app-ds-border-subtle: #f1f6f8;
    --app-ds-divider: #e7eaed;

    /* Tables (Kapella basic-table) */
    --app-ds-table-header-bg: transparent;
    --app-ds-table-header-text: #6c7293;
    --app-ds-table-row-hover: #eaeaf1;
    --app-ds-table-row-striped: rgba(0, 0, 0, 0.03);
    --app-ds-table-border: #f1f6f8;

    /* Status pills (Kapella .badge) */
    --app-ds-badge-danger-text: #ee5b5b;
    --app-ds-badge-danger-bg: rgba(238, 91, 91, 0.12);
    --app-ds-badge-danger-border: rgba(238, 91, 91, 0.35);
    --app-ds-badge-warning-text: #c9a000;
    --app-ds-badge-warning-bg: rgba(252, 213, 59, 0.2);
    --app-ds-badge-warning-border: rgba(252, 213, 59, 0.45);
    --app-ds-badge-info-text: #0ad7f7;
    --app-ds-badge-info-bg: rgba(10, 215, 247, 0.12);
    --app-ds-badge-info-border: rgba(10, 215, 247, 0.35);
    --app-ds-badge-success-text: #0bb89a;
    --app-ds-badge-success-bg: rgba(13, 219, 185, 0.12);
    --app-ds-badge-success-border: rgba(13, 219, 185, 0.35);
    --app-ds-badge-neutral-text: #6c7293;
    --app-ds-badge-neutral-bg: rgba(108, 114, 147, 0.1);
    --app-ds-badge-neutral-border: rgba(108, 114, 147, 0.25);

    /* Forms */
    --app-ds-input-bg: #ffffff;
    --app-ds-input-border: #e7eaed;
    --app-ds-input-border-hover: #c9cdd8;
    --app-ds-input-placeholder: #a7afb7;

    /* Navigation (sidebar) */
    --app-ds-nav-item-text: var(--app-ds-text-secondary);
    --app-ds-nav-item-text-hover: var(--app-ds-text-primary);
    --app-ds-nav-item-icon: var(--app-ds-text-muted);
    --app-ds-nav-item-icon-hover: var(--app-ds-color-primary);
    --app-ds-nav-active-bg: rgba(70, 77, 238, 0.1);
    --app-ds-nav-active-text: var(--app-ds-color-primary);
    --app-ds-nav-active-indicator: var(--app-ds-color-primary);
    --app-ds-nav-hover-bg: rgba(70, 77, 238, 0.06);
    --app-ds-nav-focus-ring: rgba(70, 77, 238, 0.35);

    /* Spacing (Kapella card ~1.875rem) */
    --app-ds-space-0: 0;
    --app-ds-space-1: 0.25rem;
    --app-ds-space-2: 0.5rem;
    --app-ds-space-3: 0.75rem;
    --app-ds-space-4: 1rem;
    --app-ds-space-5: 1.25rem;
    --app-ds-space-6: 1.5rem;
    --app-ds-space-8: 2rem;
    --app-ds-space-10: 2.5rem;
    --app-ds-page-padding-x: 1.5rem;
    --app-ds-page-padding-y: 1.5rem;
    --app-ds-section-gap: 1.5rem;
    --app-ds-card-padding: 1.875rem;

    /* Density */
    --app-ds-table-cell-py: 1rem;
    --app-ds-table-cell-px: 0.9375rem;
    --app-ds-btn-py: 0.625rem;
    --app-ds-btn-px: 1.125rem;

    /* Radius & shadow */
    --app-ds-radius-sm: 2px;
    --app-ds-radius-md: 6px;
    --app-ds-radius-lg: 8px;
    --app-ds-radius-pill: 999px;
    --app-ds-shadow-card: 0 2px 4px 0 rgba(185, 185, 185, 0.35);
    --app-ds-shadow-card-hover: 0 4px 12px 0 rgba(185, 185, 185, 0.4);
    --app-ds-shadow-dropdown: 0 8px 24px rgba(0, 23, 55, 0.08);

    /* Icons */
    --app-ds-icon-sm: 1.125rem;
    --app-ds-icon-md: 1.25rem;
    --app-ds-icon-lg: 1.5rem;
    --app-ds-icon-stat: 2.75rem;

    /* Layout */
    --app-ds-sidebar-width: 260px;
    --app-ds-topbar-height: 56px;
    --app-ds-content-max-width: 1600px;
    --app-ds-transition: 0.25s ease;
    --app-ds-overlay: rgba(0, 23, 55, 0.45);

    /* Breakpoints */
    --app-ds-bp-sm: 600px;
    --app-ds-bp-md: 960px;
    --app-ds-bp-lg: 1280px;
}

html.mud-theme-dark {
    --app-ds-color-primary: #6b71f5;
    --app-ds-color-primary-hover: #7d82f7;
    --app-ds-color-primary-active: #8f93f8;
    --app-ds-color-primary-soft: rgba(107, 113, 245, 0.22);
    --app-ds-color-secondary: #9aa0b8;
    --app-ds-color-secondary-muted: #6b7289;
    --app-ds-gradient-brand: linear-gradient(230deg, #759bff, #6b71f5);

    --app-ds-color-success-soft: rgba(13, 219, 185, 0.15);
    --app-ds-color-info-soft: rgba(10, 215, 247, 0.15);
    --app-ds-color-warning-soft: rgba(252, 213, 59, 0.15);
    --app-ds-color-danger-soft: rgba(238, 91, 91, 0.15);

    --app-ds-text-primary: #e8eaf6;
    --app-ds-text-secondary: #9aa0b8;
    --app-ds-text-muted: #6b7289;

    --app-ds-bg-content: #0f1219;
    --app-ds-bg-muted: #161922;
    --app-ds-bg-surface: #161922;
    --app-ds-bg-elevated: #1c2030;
    --app-ds-bg-surface-hover: #222736;

    --app-ds-border: #2a3042;
    --app-ds-border-subtle: #222736;
    --app-ds-divider: #2a3042;

    --app-ds-table-header-bg: transparent;
    --app-ds-table-header-text: #9aa0b8;
    --app-ds-table-row-hover: #222736;
    --app-ds-table-row-striped: rgba(255, 255, 255, 0.03);
    --app-ds-table-border: #2a3042;

    --app-ds-badge-danger-text: #f08080;
    --app-ds-badge-danger-bg: rgba(238, 91, 91, 0.18);
    --app-ds-badge-danger-border: rgba(238, 91, 91, 0.4);
    --app-ds-badge-warning-text: #fcd53b;
    --app-ds-badge-warning-bg: rgba(252, 213, 59, 0.15);
    --app-ds-badge-warning-border: rgba(252, 213, 59, 0.4);
    --app-ds-badge-info-text: #0ad7f7;
    --app-ds-badge-info-bg: rgba(10, 215, 247, 0.15);
    --app-ds-badge-info-border: rgba(10, 215, 247, 0.4);
    --app-ds-badge-success-text: #0ddbb9;
    --app-ds-badge-success-bg: rgba(13, 219, 185, 0.15);
    --app-ds-badge-success-border: rgba(13, 219, 185, 0.4);
    --app-ds-badge-neutral-text: #9aa0b8;
    --app-ds-badge-neutral-bg: rgba(154, 160, 184, 0.12);
    --app-ds-badge-neutral-border: rgba(154, 160, 184, 0.3);

    --app-ds-input-bg: #161922;
    --app-ds-input-border: #2a3042;
    --app-ds-input-border-hover: #3d4560;
    --app-ds-input-placeholder: #6b7289;

    --app-ds-nav-item-text: var(--app-ds-text-secondary);
    --app-ds-nav-item-text-hover: var(--app-ds-text-primary);
    --app-ds-nav-item-icon: var(--app-ds-text-muted);
    --app-ds-nav-item-icon-hover: var(--app-ds-color-primary);
    --app-ds-nav-active-bg: rgba(107, 113, 245, 0.18);
    --app-ds-nav-active-text: var(--app-ds-color-primary);
    --app-ds-nav-active-indicator: var(--app-ds-color-primary);
    --app-ds-nav-hover-bg: rgba(107, 113, 245, 0.1);
    --app-ds-nav-focus-ring: rgba(107, 113, 245, 0.45);
    --app-ds-shadow-card: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
    --app-ds-overlay: rgba(0, 0, 0, 0.55);
}

body {
    font-family: var(--app-ds-font-family);
    font-size: var(--app-ds-font-size-base);
    line-height: var(--app-ds-line-height-normal);
    background-color: var(--app-ds-bg-content);
    color: var(--app-ds-text-secondary);
}