/**
 * HomeOS AI — CSS Variables
 * Premium Dark Theme — inspiracje: Tesla / Vercel / Linear / OpenAI / Arc / GitHub Dark
 * Wszystkie komponenty korzystają z tych tokenów (--md-*), więc zmiana palety
 * tutaj przeskórowuje całą aplikację.
 * ============================================================
 */

/* ============================================================
   Motyw ciemny (domyślny) — premium
   ============================================================ */
:root,
[data-theme="dark"] {

    /* ---- Kolory główne (Primary — elektryczny błękit) ---- */
    --md-primary:                    #00C2FF;
    --md-on-primary:                 #04131B;
    --md-primary-container:          #0A3B4D;
    --md-on-primary-container:       #AEE9FF;

    /* ---- Kolory dodatkowe (neutralne) ---- */
    --md-secondary:                  #9CA3AF;
    --md-on-secondary:               #0B0F14;
    --md-secondary-container:        #222E40;
    --md-on-secondary-container:     #E5E9F0;

    /* ---- Kolory trzeciego rzędu (akcent lodowy) ---- */
    --md-tertiary:                   #7DD3FC;
    --md-on-tertiary:                #04131B;
    --md-tertiary-container:         #123244;
    --md-on-tertiary-container:      #CDEEFF;

    /* ---- Błąd / Danger ---- */
    --md-error:                      #EF4444;
    --md-on-error:                   #2A0A0A;
    --md-error-container:            #3A1618;
    --md-on-error-container:         #FECACA;

    /* ---- Sukces ---- */
    --md-success:                    #10B981;
    --md-on-success:                 #04231A;
    --md-success-container:          #0C3A2E;
    --md-on-success-container:       #A7F3D0;

    /* ---- Ostrzeżenie ---- */
    --md-warning:                    #F59E0B;
    --md-on-warning:                 #2A1C02;
    --md-warning-container:          #3D2C08;
    --md-on-warning-container:       #FDE68A;

    /* ---- Tło i powierzchnia ---- */
    --md-background:                 #0B0F14;
    --md-on-background:              #F3F4F6;
    --md-surface:                    #0B0F14;
    --md-on-surface:                 #F3F4F6;
    --md-surface-variant:            #222E40;
    --md-on-surface-variant:         #9CA3AF;

    /* ---- Warstwy powierzchni (elevation) ---- */
    --md-surface-1:                  #1A2332;  /* karty */
    --md-surface-2:                  #1F2A3C;
    --md-surface-3:                  #24324A;  /* dropdown / modal / nagłówki tabel */
    --md-surface-4:                  #293852;
    --md-surface-5:                  #2E3E5A;

    /* ---- Obrysy ---- */
    --md-outline:                    #3A4759;
    --md-outline-variant:            #2B3445;

    /* ---- Inwersje (jasne elementy na ciemnym) ---- */
    --md-inverse-surface:            #E5E9F0;
    --md-inverse-on-surface:         #1A2332;
    --md-inverse-primary:            #00C2FF;

    /* ---- Scrim / Shadow ---- */
    --md-scrim:                      rgba(3, 7, 12, .68);
    --md-shadow:                     rgba(0, 0, 0, .55);

    /* ---- State layers (primary tint) ---- */
    --md-state-hover:                rgba(0, 194, 255, .08);
    --md-state-focus:                rgba(0, 194, 255, .12);
    --md-state-pressed:              rgba(0, 194, 255, .16);
    --md-state-dragged:              rgba(0, 194, 255, .16);
    --md-state-disabled:             rgba(243, 244, 246, .38);
    --md-state-disabled-container:   rgba(243, 244, 246, .12);

    /* ---- Nawigacja ---- */
    --md-nav-indicator:              rgba(0, 194, 255, .12);
    --md-nav-item-active-fg:         #00C2FF;
    --md-nav-item-fg:                #9CA3AF;

    /* ---- Topbar (glassmorphism — topbar.css ma backdrop-filter) ---- */
    --topbar-bg:                     rgba(11, 15, 20, .72);
    --topbar-height:                 64px;

    /* ---- Sidebar ---- */
    --sidebar-width:                 280px;
    --sidebar-collapsed-width:       80px;
    --sidebar-bg:                    #121821;
    --sidebar-border:                #2B3445;

    /* ---- Focus ring (primary) ---- */
    --md-focus-ring:                 rgba(0, 194, 255, .35);
}

/* ============================================================
   Motyw jasny (opcjonalny) — bez fioletu, akcent błękitny
   ============================================================ */
[data-theme="light"] {

    --md-primary:                    #0091C2;
    --md-on-primary:                 #ffffff;
    --md-primary-container:          #CBF1FF;
    --md-on-primary-container:       #00303F;

    --md-secondary:                  #4B5563;
    --md-on-secondary:               #ffffff;
    --md-secondary-container:        #E2E8F0;
    --md-on-secondary-container:     #1E293B;

    --md-tertiary:                   #0369A1;
    --md-on-tertiary:                #ffffff;
    --md-tertiary-container:         #CBF1FF;
    --md-on-tertiary-container:      #002536;

    --md-error:                      #DC2626;
    --md-on-error:                   #ffffff;
    --md-error-container:            #FEE2E2;
    --md-on-error-container:         #450A0A;

    --md-success:                    #059669;
    --md-on-success:                 #ffffff;
    --md-success-container:          #D1FAE5;
    --md-on-success-container:       #064E3B;

    --md-warning:                    #D97706;
    --md-on-warning:                 #ffffff;
    --md-warning-container:          #FEF3C7;
    --md-on-warning-container:       #451A03;

    --md-background:                 #F8FAFC;
    --md-on-background:              #0F172A;
    --md-surface:                    #FFFFFF;
    --md-on-surface:                 #0F172A;
    --md-surface-variant:            #EEF2F7;
    --md-on-surface-variant:         #4B5563;

    --md-surface-1:                  #FFFFFF;
    --md-surface-2:                  #F5F8FC;
    --md-surface-3:                  #EEF2F7;
    --md-surface-4:                  #E7EDF4;
    --md-surface-5:                  #E0E7F0;

    --md-outline:                    #CBD5E1;
    --md-outline-variant:            #E2E8F0;

    --md-inverse-surface:            #1A2332;
    --md-inverse-on-surface:         #F3F4F6;
    --md-inverse-primary:            #00C2FF;

    --md-scrim:                      rgba(15, 23, 42, .32);
    --md-shadow:                     rgba(15, 23, 42, .12);

    --md-state-hover:                rgba(0, 145, 194, .08);
    --md-state-focus:                rgba(0, 145, 194, .12);
    --md-state-pressed:              rgba(0, 145, 194, .16);
    --md-state-dragged:              rgba(0, 145, 194, .16);
    --md-state-disabled:             rgba(15, 23, 42, .38);
    --md-state-disabled-container:   rgba(15, 23, 42, .12);

    --md-nav-indicator:              rgba(0, 145, 194, .12);
    --md-nav-item-active-fg:         #0091C2;
    --md-nav-item-fg:                #4B5563;

    --topbar-bg:                     rgba(255, 255, 255, .72);

    --sidebar-bg:                    #FFFFFF;
    --sidebar-border:                #E2E8F0;

    --md-focus-ring:                 rgba(0, 145, 194, .3);
}

/* ============================================================
   Typografia
   ============================================================ */
:root {
    --md-display-large:   57px;
    --md-display-medium:  45px;
    --md-display-small:   36px;

    --md-headline-large:  32px;
    --md-headline-medium: 28px;
    --md-headline-small:  24px;

    --md-title-large:     22px;
    --md-title-medium:    16px;
    --md-title-small:     14px;

    --md-label-large:     14px;
    --md-label-medium:    12px;
    --md-label-small:     11px;

    --md-body-large:      16px;
    --md-body-medium:     14px;
    --md-body-small:      12px;

    --font-family:        'Google Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono:   'Google Sans Mono', 'JetBrains Mono', 'Roboto Mono', 'Consolas', monospace;
}

/* ============================================================
   Kształty (shape tokens) — miękkie, premium
   ============================================================ */
:root {
    --md-shape-extra-small:  6px;
    --md-shape-small:        10px;
    --md-shape-medium:       14px;
    --md-shape-large:        20px;
    --md-shape-extra-large:  28px;
    --md-shape-full:         9999px;
}

/* ============================================================
   Elevation (Box Shadow) — subtelne cienie premium
   ============================================================ */
:root {
    --md-elevation-0: none;
    --md-elevation-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.2);
    --md-elevation-2: 0 2px 6px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.25);
    --md-elevation-3: 0 6px 16px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --md-elevation-4: 0 10px 28px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.3);
    --md-elevation-5: 0 18px 48px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.35);
}

/* ============================================================
   Motion (Animacje)
   ============================================================ */
:root {
    --md-motion-short1:    100ms;
    --md-motion-short2:    160ms;
    --md-motion-short3:    240ms;
    --md-motion-short4:    320ms;
    --md-motion-medium1:   260ms;
    --md-motion-medium2:   300ms;
    --md-motion-medium3:   360ms;
    --md-motion-medium4:   420ms;
    --md-motion-long1:     460ms;
    --md-motion-long2:     520ms;
    --md-motion-long3:     580ms;
    --md-motion-long4:     640ms;

    --md-easing-standard:      cubic-bezier(.2, 0, 0, 1);
    --md-easing-decelerate:    cubic-bezier(0, 0, 0, 1);
    --md-easing-accelerate:    cubic-bezier(.3, 0, 1, 1);
    --md-easing-emphasized:    cubic-bezier(.2, 0, 0, 1);
}

/* ============================================================
   Zmienne aplikacji (app-level tokens)
   ============================================================ */
:root {
    --z-sidebar:        100;
    --z-topbar:         200;
    --z-dropdown:       300;
    --z-modal-backdrop: 400;
    --z-modal:          500;
    --z-toast:          600;
    --z-tooltip:        700;

    --page-padding:    1.75rem;
    --card-padding:    1.5rem;
    --gap-sm:          0.5rem;
    --gap-md:          1rem;
    --gap-lg:          1.5rem;
    --gap-xl:          2rem;
}

/* ============================================================
   Material Symbols — konfiguracja osi zmiennych
   ============================================================ */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 24px;
    line-height: 1;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon--filled  { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon--sm      { font-size: 18px; }
.icon--md      { font-size: 24px; }
.icon--lg      { font-size: 32px; }
.icon--xl      { font-size: 48px; }