/**
 * Manic Pixels Web OS — CSS Custom Properties (Design Tokens)
 * Tema padrão: KDE Breeze Dark.
 * O ThemeManager substitui estas variáveis em tempo-de-execução via setProperty().
 *
 * NUNCA use cores hard-coded fora deste ficheiro — sempre var(--mp-*).
 *
 * Corrigido Sprint 9 — Bug B-02: variáveis ausentes causavam UI transparente.
 */

:root {
  /* ── Paleta base ────────────────────────────────────────────────────────── */
  --mp-bg-primary:          #1b1e2e;   /* fundo do desktop */
  --mp-bg-secondary:        #232639;   /* painéis, sidebars */
  --mp-bg-tertiary:         #2a2d42;   /* hover, item selecionado */
  --mp-bg-quaternary:       #31354e;   /* inputs, cards */

  /* ── Acento Breeze Blue ─────────────────────────────────────────────────── */
  --mp-accent:              #3daee9;
  --mp-accent-hover:        #5bbcee;
  --mp-accent-active:       #2896d4;
  --mp-accent-rgb:          61, 174, 233;   /* para rgba() com opacidade */

  /* ── Texto ──────────────────────────────────────────────────────────────── */
  --mp-text-primary:        rgba(239, 240, 241, 0.95);
  --mp-text-secondary:      rgba(239, 240, 241, 0.55);
  --mp-text-disabled:       rgba(239, 240, 241, 0.30);
  --mp-text-accent:         #3daee9;

  /* ── Glassmorphism — opacidade controlada globalmente pelo slider de
     intensidade (fx.glass.intensity), separada do RGB de cada superfície.
     Antes, cada -bg já vinha com alpha fixo (0.82–0.97) embutido no tema,
     opaco demais pra o blur aparecer de verdade — o slider só mexia no
     blur (raio), nunca na opacidade, então não tinha efeito visível real. ── */
  --mp-glass-opacity:       0.18;   /* 0–1, definido em runtime por FxManager/boot.js (legado) */
  --mp-glass-tint-opacity:  0.35;   /* 0–1, opacidade do tint de acento sobre o blur (Aero Glass W7) */

  /* ── Aero Glass — variáveis do efeito visual (definidas em runtime pelo boot.js) ─
     Estes valores simulam a reflexão e refração de luz no vidro, tornando o
     efeito visível mesmo em fundos escuros / monocromáticos, exatamente como
     o Windows 7 Aero faz via DWM (Desktop Window Manager).                  ── */
  --mp-aero-saturation:       180%;                          /* boost de saturação no backdrop-filter */
  --mp-aero-highlight-top:    rgba(255, 255, 255, 0.32);     /* brilho superior — simula reflexo de luz */
  --mp-aero-highlight-edge:   rgba(255, 255, 255, 0.14);     /* borda iluminada */
  --mp-aero-shine:            rgba(255, 255, 255, 0.06);     /* camada de brilho difuso */
  --mp-aero-titlebar-top:     rgba(255, 255, 255, 0.18);     /* gradiente superior da titlebar */
  --mp-aero-titlebar-bottom:  rgba(255, 255, 255, 0.05);     /* gradiente inferior da titlebar */

  /* ── Janelas (glassmorphism) ────────────────────────────────────────────── */
  --mp-window-bg-rgb:       27, 30, 46;
  --mp-window-bg:           rgba(var(--mp-window-bg-rgb), var(--mp-glass-opacity));   /* com blur */
  --mp-window-bg-solid:     #1e2132;                   /* sem blur */
  --mp-window-blur:         20px;
  --mp-window-border:       rgba(255, 255, 255, 0.22);
  --mp-window-border-width: 1px;
  --mp-window-radius:       8px;
  --mp-window-shadow:       0 8px 32px rgba(0, 0, 0, 0.55);

  /* ── Titlebar ───────────────────────────────────────────────────────────── */
  --mp-titlebar-bg-rgb:      30, 33, 50;
  --mp-titlebar-bg:          rgba(var(--mp-titlebar-bg-rgb), var(--mp-glass-opacity));
  /* BUG-FIX: variável era undefined → browser resolvia como transparent, fazendo
     só a janela INATIVA mostrar o blur (por acidente). Agora definida explicitamente. */
  --mp-titlebar-inactive-bg: rgba(var(--mp-titlebar-bg-rgb), calc(var(--mp-glass-opacity) * 0.6));
  --mp-titlebar-height:      32px;
  --mp-titlebar-btn-size:    14px;
  --mp-titlebar-btn-gap:     6px;

  /* ── Taskbar ────────────────────────────────────────────────────────────── */
  --mp-taskbar-bg-rgb:      20, 22, 36;
  --mp-taskbar-bg:          rgba(var(--mp-taskbar-bg-rgb), var(--mp-glass-opacity));
  --mp-taskbar-blur:        20px;
  --mp-taskbar-border:      rgba(255, 255, 255, 0.20);
  --mp-taskbar-height:      32px;
  --mp-taskbar-fg:          rgba(239, 240, 241, 0.90);
  --mp-taskbar-highlight:   rgba(255, 255, 255, 0.09);

  /* ── Menus (Start Menu, context menus, dropdowns) ───────────────────────── */
  --mp-menu-bg-rgb:         30, 33, 50;
  --mp-menu-bg:             rgba(var(--mp-menu-bg-rgb), var(--mp-glass-opacity));
  --mp-menu-bg-solid:       #1e2132;
  --mp-menu-blur:           20px;
  --mp-menu-border:         rgba(255, 255, 255, 0.22);
  --mp-menu-fg:             rgba(239, 240, 241, 0.92);
  --mp-menu-separator:      rgba(255, 255, 255, 0.07);
  --mp-menu-item-hover:     rgba(61, 174, 233, 0.12);
  --mp-menu-item-active:    rgba(61, 174, 233, 0.20);
  /* aliases usados por contextmenu.css e outros módulos */
  --mp-menu-active-bg:      rgba(61, 174, 233, 0.15);
  --mp-menu-active-fg:      rgba(239, 240, 241, 0.98);
  --mp-menu-radius:         4px;
  --mp-menu-shadow:         0 8px 32px rgba(0, 0, 0, 0.55);
  --mp-menu-icon-size:      16px;

  /* ── Glass genérico ─────────────────────────────────────────────────────── */
  --mp-glass-bg:            rgba(27, 30, 46, 0.80);
  --mp-glass-border:        rgba(255, 255, 255, 0.10);
  --mp-glass-blur:          12px;

  /* ── Overlay (modais, menus de contexto) ───────────────────────────────── */
  --mp-overlay-bg:          rgba(0, 0, 0, 0.55);

  /* ── Tipografia ─────────────────────────────────────────────────────────── */
  --mp-font-ui:             'Noto Sans', system-ui, -apple-system, sans-serif;
  --mp-font-mono:           'Noto Sans Mono', 'JetBrains Mono', monospace;
  --mp-font-size-xs:        11px;
  --mp-font-size-sm:        12px;
  --mp-font-size-base:      13px;
  --mp-font-size-md:        14px;
  --mp-font-size-lg:        15px;
  --mp-font-size-xl:        18px;
  --mp-line-height:         1.5;

  /* ── Espaçamento ────────────────────────────────────────────────────────── */
  --mp-gap-xs:              4px;
  --mp-gap-sm:              6px;
  --mp-gap-md:              10px;
  --mp-gap-lg:              16px;
  --mp-gap-xl:              24px;

  /* ── Raios ──────────────────────────────────────────────────────────────── */
  --mp-btn-radius:          4px;
  --mp-input-radius:        4px;
  --mp-card-radius:         8px;
  --mp-panel-radius:        6px;

  /* ── Botões ─────────────────────────────────────────────────────────────── */
  --mp-btn-bg:              rgba(255, 255, 255, 0.07);
  --mp-btn-bg-hover:        rgba(255, 255, 255, 0.12);
  --mp-btn-bg-active:       rgba(61, 174, 233, 0.18);
  --mp-btn-border:          rgba(255, 255, 255, 0.10);
  --mp-btn-primary-bg:      #3daee9;
  --mp-btn-primary-fg:      #ffffff;
  --mp-btn-primary-hover:   #5bbcee;
  --mp-btn-danger-bg:       rgba(218, 68, 83, 0.18);
  --mp-btn-danger-fg:       #da4453;
  --mp-btn-danger-hover:    rgba(218, 68, 83, 0.28);

  /* ── Inputs ─────────────────────────────────────────────────────────────── */
  --mp-input-bg:            rgba(255, 255, 255, 0.05);
  --mp-input-border:        rgba(255, 255, 255, 0.12);
  --mp-input-border-focus:  #3daee9;
  --mp-input-fg:            rgba(239, 240, 241, 0.95);
  --mp-input-placeholder:   rgba(239, 240, 241, 0.38);

  /* ── Scrollbar ──────────────────────────────────────────────────────────── */
  --mp-scrollbar-width:     6px;
  --mp-scrollbar-track:     rgba(255, 255, 255, 0.03);
  --mp-scrollbar-thumb:     rgba(255, 255, 255, 0.18);
  --mp-scrollbar-thumb-hover: rgba(255, 255, 255, 0.30);
  --mp-scrollbar-radius:    3px;

  /* ── Barra de progresso ─────────────────────────────────────────────────── */
  --mp-progress-height:     4px;
  --mp-progress-track:      rgba(255, 255, 255, 0.10);
  --mp-progress-fill:       #3daee9;
  --mp-progress-radius:     2px;

  /* ── Skeleton / shimmer ─────────────────────────────────────────────────── */
  --mp-skeleton-bg:         rgba(255, 255, 255, 0.06);
  --mp-skeleton-shimmer:    rgba(255, 255, 255, 0.12);

  /* ── Ícones ─────────────────────────────────────────────────────────────── */
  --mp-icon-size-sm:        16px;
  --mp-icon-size-md:        20px;
  --mp-icon-size-lg:        32px;
  --mp-icon-size-xl:        48px;

  /* ── Desktop icons ──────────────────────────────────────────────────────── */
  --mp-desktop-icon-size:   48px;
  --mp-desktop-label-bg:    rgba(0, 0, 0, 0.50);
  --mp-desktop-select-bg:   rgba(61, 174, 233, 0.18);
  --mp-desktop-select-border: rgba(61, 174, 233, 0.55);

  /* ── Rubber-band de seleção ─────────────────────────────────────────────── */
  --mp-rubberband-bg:       rgba(61, 174, 233, 0.12);
  --mp-rubberband-border:   rgba(61, 174, 233, 0.60);

  /* ── Notificações / badges ──────────────────────────────────────────────── */
  --mp-badge-bg:            #3daee9;
  --mp-badge-fg:            #ffffff;
  --mp-badge-error-bg:      #da4453;
  --mp-badge-success-bg:    #27ae60;
  --mp-badge-warn-bg:       #f39c12;

  /* ── Separadores ────────────────────────────────────────────────────────── */
  --mp-separator:           rgba(255, 255, 255, 0.07);

  /* ── Focus ring ─────────────────────────────────────────────────────────── */
  --mp-focus-ring:          rgba(61, 174, 233, 0.55);
  --mp-focus-ring-width:    2px;

  /* ── Drag-and-drop ──────────────────────────────────────────────────────── */
  --mp-drop-target-bg:      rgba(61, 174, 233, 0.08);
  --mp-drop-target-border:  rgba(61, 174, 233, 0.50);

  /* ── Desktop icons — Bug B-09: variáveis ausentes causavam cor branca fixa ─ */
  --mp-desktop-icon-fg:     rgba(239, 240, 241, 0.95);   /* igual a --mp-text-primary */
  --mp-desktop-icon-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.55);
  --mp-desktop-grid-color:  rgba(255, 255, 255, 0.04);   /* linhas de grade durante drag */
}