/**
 * Lu-OS - Windows XP Luna Blue Theme
 * Tema completo baseado no Windows XP (Luna Blue)
 * Versão: v.0.0.wip.0
 * Data: 2025-12-09
 */

/* ========================================
   VARIÁVEIS CSS - PALETA LUNA BLUE
   ======================================== */

:root {
  /* === AZUL LUNA === */
  --xp-blue-light: #3C89D6;
  --xp-blue: #2559AD;
  --xp-blue-dark: #1A4480;
  --xp-blue-taskbar: #1E4694;
  --xp-blue-taskbar-light: #2A5FBC;
  --xp-blue-border: #003C74;
  --xp-blue-highlight: #0054E3;

  /* === GRADIENTES DE BARRA DE TÍTULO === */
  --xp-title-gradient: linear-gradient(to right, #0054E3 0%, #3C89D6 100%);
  --xp-title-inactive: linear-gradient(to right, #7A96DF 0%, #B4C8EB 100%);

  /* === GRADIENTES DA TASKBAR === */
  --xp-taskbar-gradient: linear-gradient(to bottom, #2A5FBC 0%, #1E4694 100%);

  /* === VERDE DO BOTÃO INICIAR === */
  --xp-green: #3CAE4A;
  --xp-green-hover: #45C556;
  --xp-green-border: #1E6B26;

  /* === CINZAS (Background, Bordas) === */
  --xp-gray-light: #ECE9D8;      /* Background padrão */
  --xp-gray: #D4D0C8;            /* Background escuro */
  --xp-gray-dark: #ACA899;       /* Bordas */
  --xp-gray-darker: #7A7A7A;     /* Bordas escuras */
  --xp-gray-border: #919B9C;     /* Bordas de janelas */

  /* === BRANCOS E PRETOS === */
  --xp-white: #FFFFFF;
  --xp-black: #000000;
  --xp-text-black: #000000;
  --xp-text-white: #FFFFFF;

  /* === SOMBRAS === */
  --xp-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  --xp-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.2);
  --xp-shadow-heavy: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* === BORDAS 3D (Raised) === */
  --xp-inset-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.6),
    inset -1px -1px 0 rgba(0, 0, 0, 0.2);

  /* === FONTE === */
  --xp-font-family: 'Tahoma', 'Segoe UI', 'Trebuchet MS', sans-serif;
  --xp-font-size: 11px;
  --xp-font-size-small: 10px;
  --xp-font-size-title: 12px;
  --xp-font-weight-normal: 400;
  --xp-font-weight-bold: 700;

  /* === CORES DE MENU INICIAR === */
  --xp-start-menu-left: #4173D6;
  --xp-start-menu-right: #ECE9D8;
  --xp-start-menu-hover: #D1E8FF;

  /* === CORES DE BOTÕES === */
  --xp-button-gradient: linear-gradient(to bottom, #FEFEFE 0%, #ECE9D8 100%);
  --xp-button-hover-gradient: linear-gradient(to bottom, #FFF 0%, #F0EDE5 100%);
  --xp-button-active-gradient: linear-gradient(to bottom, #E0DDD5 0%, #F5F3EB 100%);

  /* === CORES DE INPUTS === */
  --xp-input-bg: #FFFFFF;
  --xp-input-border: #7F9DB9;
  --xp-input-focus-border: #0054E3;

  /* === SCROLLBAR === */
  --xp-scrollbar-bg: #ECE9D8;
  --xp-scrollbar-thumb: #C1C1C1;
  --xp-scrollbar-thumb-hover: #A0A0A0;

  /* === Z-INDEX === */
  --z-desktop: 1;
  --z-icons: 10;
  --z-windows: 1000;
  --z-start-menu: 9998;
  --z-taskbar: 9999;
  --z-modal: 10000;
}

/* ========================================
   RESET E ESTILOS GLOBAIS
   ======================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--xp-font-family);
  font-size: var(--xp-font-size);
  color: var(--xp-text-black);
  background-color: var(--xp-gray-light);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove seleção de texto (exceto em inputs) */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ========================================
   CLASSES AUXILIARES - BORDAS 3D
   ======================================== */

/* Borda Raised (levantada) */
.xp-raised {
  border-top: 1px solid var(--xp-white);
  border-left: 1px solid var(--xp-white);
  border-right: 1px solid var(--xp-gray-darker);
  border-bottom: 1px solid var(--xp-gray-darker);
}

/* Borda Sunken (afundada) */
.xp-sunken {
  border-top: 1px solid var(--xp-gray-darker);
  border-left: 1px solid var(--xp-gray-darker);
  border-right: 1px solid var(--xp-white);
  border-bottom: 1px solid var(--xp-white);
}

/* Borda Ridge (3D dupla) */
.xp-ridge {
  border: 2px ridge var(--xp-gray-dark);
}

/* Borda Flat */
.xp-flat {
  border: 1px solid var(--xp-gray-dark);
}

/* ========================================
   SCROLLBAR PERSONALIZADA (WebKit)
   ======================================== */

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: var(--xp-scrollbar-bg);
  border: 1px solid var(--xp-gray-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--xp-scrollbar-thumb);
  border: 1px solid var(--xp-gray-dark);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--xp-scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: var(--xp-scrollbar-bg);
}

/* Botões de seta (cima/baixo/esquerda/direita) */
::-webkit-scrollbar-button {
  background: var(--xp-gray-light);
  border: 1px solid var(--xp-gray-dark);
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-button:hover {
  background: var(--xp-gray);
}

/* ========================================
   TEXTO E TIPOGRAFIA
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--xp-font-weight-bold);
}

p {
  line-height: 1.4;
}

a {
  color: var(--xp-blue-highlight);
  text-decoration: underline;
  cursor: pointer;
}

a:hover {
  color: var(--xp-blue-dark);
}

/* ========================================
   FOCUS OUTLINE (estilo XP)
   ======================================== */

:focus {
  outline: 1px dotted var(--xp-black);
  outline-offset: 2px;
}

button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 1px dotted var(--xp-black);
}

/* ========================================
   ANIMAÇÕES BÁSICAS
   ======================================== */

@keyframes xp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes xp-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes xp-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes xp-slide-down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ========================================
   CLASSES DE ANIMAÇÃO
   ======================================== */

.xp-fade-in {
  animation: xp-fade-in 0.2s ease-out;
}

.xp-fade-out {
  animation: xp-fade-out 0.2s ease-out;
}

.xp-slide-up {
  animation: xp-slide-up 0.25s ease-out;
}

.xp-slide-down {
  animation: xp-slide-down 0.25s ease-out;
}

/* ========================================
   CLASSES UTILITÁRIAS
   ======================================== */

.xp-no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.xp-cursor-pointer {
  cursor: pointer;
}

.xp-cursor-default {
  cursor: default;
}

.xp-cursor-move {
  cursor: move;
}

.xp-hidden {
  display: none !important;
}

.xp-invisible {
  visibility: hidden;
}

/* ========================================
   SISTEMA DE GRID SIMPLES
   ======================================== */

.xp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.xp-col {
  flex: 1;
}

.xp-col-auto {
  flex: 0 0 auto;
}

/* ========================================
   ESPAÇAMENTOS
   ======================================== */

.xp-p-0 { padding: 0; }
.xp-p-1 { padding: 4px; }
.xp-p-2 { padding: 8px; }
.xp-p-3 { padding: 12px; }
.xp-p-4 { padding: 16px; }

.xp-m-0 { margin: 0; }
.xp-m-1 { margin: 4px; }
.xp-m-2 { margin: 8px; }
.xp-m-3 { margin: 12px; }
.xp-m-4 { margin: 16px; }

/* ========================================
   CORES DE TEXTO
   ======================================== */

.xp-text-black { color: var(--xp-text-black); }
.xp-text-white { color: var(--xp-text-white); }
.xp-text-blue { color: var(--xp-blue); }
.xp-text-gray { color: var(--xp-gray-dark); }

/* ========================================
   BACKGROUNDS
   ======================================== */

.xp-bg-light { background-color: var(--xp-gray-light); }
.xp-bg-gray { background-color: var(--xp-gray); }
.xp-bg-white { background-color: var(--xp-white); }
.xp-bg-blue { background-color: var(--xp-blue); }

/* ========================================
   FIM DO TEMA XP
   ======================================== */