/* ═══════════════════════════════════════════════
   Sky Intranet — Design Tokens
   Paleta: Catppuccin Macchiato (dark theme)
   ═══════════════════════════════════════════════ */

:root {
  /* ── Catppuccin Macchiato: Base Colors ── */
  --sky-bg-page: #24273a;             /* Base */
  --sky-bg-surface: #1e2030;          /* Mantle */
  --sky-bg-overlay: rgba(0, 0, 0, 0.6);

  /* ─ Surfaces escalonados (elevation) ── */
  --sky-surface-0: #363a4f;           /* Surface0 */
  --sky-surface-1: #494d64;           /* Surface1 */
  --sky-surface-2: #5b6078;           /* Surface2 */

  /* ── Text ── */
  --sky-text-primary: #cad3f5;        /* Text */
  --sky-text-secondary: #a5adcb;      /* Subtext0 */
  --sky-text-muted: #6e738d;          /* Overlay0 */
  --sky-text-on-accent: #24273a;      /* Base (texto sobre acento) */

  /* ── Borders ── */
  --sky-border-light: #363a4f;        /* Surface0 */
  --sky-border-medium: #494d64;       /* Surface1 */

  /* ── Accent ── */
  --sky-accent: #8aadf4;              /* Blue */
  --sky-accent-hover: #b7bdf8;        /* Lavender */
  --sky-accent-alt: #91d7e3;          /* Sky */
  --sky-accent-disabled: #6e738d;     /* Overlay0 */

  /* ─ Semantic ── */
  --sky-success: #a6da95;             /* Green */
  --sky-success-bg-light: rgba(166, 218, 149, 0.12);
  --sky-error: #ed8796;               /* Red */
  --sky-error-bg-light: rgba(237, 135, 150, 0.12);
  --sky-warning: #eed49f;             /* Yellow */
  --sky-warning-bg-light: rgba(238, 212, 159, 0.12);
  --sky-info: #7dc4e4;                /* Sapphire */
  --sky-info-bg-light: rgba(125, 196, 228, 0.12);
  --sky-danger: #ed8796;              /* Red (alias) */

  /* ── Shadows ─ */
  --sky-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --sky-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --sky-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);

  /* ── Spacing ── */
  --sky-space-xs: 4px;
  --sky-space-sm: 8px;
  --sky-space-md: 16px;
  --sky-space-lg: 24px;
  --sky-space-xl: 32px;
  --sky-space-2xl: 48px;

  /* ── Border Radius ── */
  --sky-radius-sm: 4px;
  --sky-radius-md: 8px;
  --sky-radius-lg: 12px;

  /* ── Typography ── */
  --sky-font-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sky-font-mono: 'Cascadia Code', 'Fira Code', 'Roboto Mono', monospace;
  --sky-fs-xs: 0.75rem;    /* 12px */
  --sky-fs-sm: 0.875rem;   /* 14px */
  --sky-fs-md: 1rem;       /* 16px */
  --sky-fs-lg: 1.125rem;   /* 18px */
  --sky-fs-xl: 1.25rem;    /* 20px */

  /* ── Z-index ── */
  --sky-z-map: 0;
  --sky-z-overlay: 100;
  --sky-z-panel: 200;
  --sky-z-modal: 300;
  --sky-z-spinner: 400;
  --sky-z-notification: 500;

  /* ═══════════════════════════════════════════
     ALIASES (compatibilidad con módulos existentes)
     Estos mapean a las variables --sky-* para que
     el código legacy siga funcionando sin cambios.
     ═══════════════════════════════════════════ */

  /* Backgrounds */
  --bg-primary: var(--sky-bg-surface);
  --bg-tertiary: var(--sky-surface-0);
  --bg-secondary: var(--sky-bg-surface);
  --bg-elevated: var(--sky-surface-1);
  --bg-input: var(--sky-bg-page);
  --bg-hover: rgba(255, 255, 255, 0.05);

  /* Text (alias sin prefijo) */
  --text-primary: var(--sky-text-primary);
  --text-secondary: var(--sky-text-secondary);
  --text-muted: var(--sky-text-muted);
  --text-on-accent: var(--sky-text-on-accent);

  /* Borders (alias sin prefijo) */
  --border: var(--sky-border-medium);
  --border-default: var(--sky-border-light);
  --border-strong: var(--sky-surface-2);
  --border-input: var(--sky-border-medium);

  /* Accent (alias sin prefijo) */
  --accent: var(--sky-accent);
  --accent-hover: var(--sky-accent-hover);
  --accent-alt: var(--sky-accent-alt);
  --accent-btn: var(--sky-accent);
  --accent-btn-hover: var(--sky-accent-hover);

  /* Semantic (alias sin prefijo) */
  --success: var(--sky-success);
  --error: var(--sky-error);
  --warning: var(--sky-warning);
  --info: var(--sky-info);
  --danger: var(--sky-danger);

  /* Spacing (alias sin prefijo) */
  --space-1: var(--sky-space-xs);
  --space-2: var(--sky-space-sm);
  --space-3: var(--sky-space-md);
  --space-4: var(--sky-space-lg);
  --space-5: var(--sky-space-xl);

  /* Radius (alias sin prefijo) */
  --radius-sm: var(--sky-radius-sm);
  --radius-md: var(--sky-radius-md);
  --radius-lg: var(--sky-radius-lg);

  /* Font (alias sin prefijo) */
  --font-sans: var(--sky-font-sans);
  --font-mono: var(--sky-font-mono);
  --font-size-xs: var(--sky-fs-xs);
  --font-size-sm: var(--sky-fs-sm);
  --font-size-base: var(--sky-fs-md);
  --font-size-lg: var(--sky-fs-lg);
  --font-size-xl: var(--sky-fs-xl);

  /* Shadows (alias sin prefijo) */
  --shadow-sm: var(--sky-shadow-sm);
  --shadow-md: var(--sky-shadow-md);
  --shadow-lg: var(--sky-shadow-lg);

  /* ═══════════════════════════════════════════
     Map Overlay Tokens (Dark Theme)
     Para componentes que flotan sobre el canvas 3D
     ═══════════════════════════════════════════ */
  --sky-map-overlay-bg: rgba(34, 39, 46, 0.92);
  --sky-map-overlay-bg-hover: rgba(55, 65, 81, 0.95);
  --sky-map-overlay-border: rgba(255, 255, 255, 0.1);
  --sky-map-overlay-text-primary: #f9fafb;
  --sky-map-overlay-text-secondary: #9ca3af;
  --sky-map-overlay-accent: #00d4ff;
  --sky-map-overlay-backdrop-filter: blur(6px);
}

/* ── Reset global mínimo ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--sky-font-sans);
  font-size: var(--sky-fs-md);
  color: var(--sky-text-primary);
  background: var(--sky-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow: hidden;
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sky-bg-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--sky-surface-1);
  border-radius: var(--sky-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sky-surface-2);
}