/**
 * SKYNETLABS Design Tokens
 * Core design system variables for all tools
 *
 * @version 1.0.0
 */

:root {
  /* Primary Colors */
  --sky-primary: #00F0FF;
  --sky-primary-dark: #00C4CC;
  --sky-primary-light: #33F3FF;
  --sky-secondary: #7B61FF;
  --sky-secondary-dark: #5B41DF;
  --sky-accent: #FF6B6B;

  /* Surface Colors */
  --sky-surface: #0A0E27;
  --sky-surface-elevated: #151933;
  --sky-surface-card: #1A1F3D;
  --sky-surface-hover: #252A4A;

  /* Text Colors */
  --sky-text: #FFFFFF;
  --sky-text-secondary: #E0E0E0;
  --sky-text-muted: #8B8FA3;
  --sky-text-disabled: #5A5E72;

  /* Status Colors */
  --sky-success: #00E676;
  --sky-warning: #FFB300;
  --sky-error: #FF5252;
  --sky-info: #00B0FF;

  /* Border & Shadow */
  --sky-border: rgba(255, 255, 255, 0.1);
  --sky-border-hover: rgba(255, 255, 255, 0.2);
  --sky-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --sky-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);

  /* Border Radius */
  --sky-radius: 8px;
  --sky-radius-sm: 4px;
  --sky-radius-lg: 12px;
  --sky-radius-xl: 16px;
  --sky-radius-full: 9999px;

  /* Spacing */
  --sky-space-1: 4px;
  --sky-space-2: 8px;
  --sky-space-3: 12px;
  --sky-space-4: 16px;
  --sky-space-5: 20px;
  --sky-space-6: 24px;
  --sky-space-8: 32px;
  --sky-space-10: 40px;
  --sky-space-12: 48px;

  /* Typography */
  --sky-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sky-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Font Sizes */
  --sky-text-xs: 0.75rem;
  --sky-text-sm: 0.875rem;
  --sky-text-base: 1rem;
  --sky-text-lg: 1.125rem;
  --sky-text-xl: 1.25rem;
  --sky-text-2xl: 1.5rem;
  --sky-text-3xl: 2rem;

  /* Font Weights */
  --sky-font-normal: 400;
  --sky-font-medium: 500;
  --sky-font-semibold: 600;
  --sky-font-bold: 700;

  /* Transitions */
  --sky-transition: 0.2s ease;
  --sky-transition-slow: 0.3s ease;
  --sky-transition-fast: 0.15s ease;

  /* Z-Index */
  --sky-z-dropdown: 100;
  --sky-z-modal: 1000;
  --sky-z-toast: 2000;
}

/* ============================================
   BASE RESET FOR TOOL CONTAINERS
   ============================================ */

[class*="skynetlabs-"],
[class^="slt-"],
[class^="bas-"],
[class^="roi-"],
[class^="arq-"],
[class^="esg-"],
[class^="fcb-"],
[class^="aga-"],
[class^="prl-"],
[class^="vpg-"],
[class^="cc-"],
[class^="vpb-"] {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[class*="skynetlabs-"] *,
[class^="slt-"] *,
[class^="bas-"] *,
[class^="roi-"] *,
[class^="arq-"] *,
[class^="esg-"] *,
[class^="fcb-"] *,
[class^="aga-"] *,
[class^="prl-"] *,
[class^="vpg-"] *,
[class^="cc-"] *,
[class^="vpb-"] * {
  box-sizing: border-box;
}

/* ============================================
   COMMON UTILITY CLASSES
   ============================================ */

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

.sky-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sky-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   COMMON BUTTON STYLES
   ============================================ */

.sky-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sky-space-2);
  padding: var(--sky-space-3) var(--sky-space-4);
  font-family: var(--sky-font-family);
  font-size: var(--sky-text-sm);
  font-weight: var(--sky-font-semibold);
  border-radius: var(--sky-radius);
  border: none;
  cursor: pointer;
  transition: all var(--sky-transition);
  text-decoration: none;
}

.sky-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sky-btn-primary {
  background: linear-gradient(135deg, var(--sky-primary), var(--sky-primary-dark));
  color: var(--sky-surface);
}

.sky-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 240, 255, 0.3);
}

.sky-btn-secondary {
  background: var(--sky-surface-elevated);
  color: var(--sky-text);
  border: 1px solid var(--sky-border);
}

.sky-btn-secondary:hover:not(:disabled) {
  background: var(--sky-surface-hover);
  border-color: var(--sky-primary);
}

.sky-btn-ghost {
  background: transparent;
  color: var(--sky-text-muted);
}

.sky-btn-ghost:hover:not(:disabled) {
  background: var(--sky-surface-elevated);
  color: var(--sky-text);
}

/* ============================================
   COMMON INPUT STYLES
   ============================================ */

.sky-input {
  width: 100%;
  padding: var(--sky-space-3) var(--sky-space-4);
  font-family: var(--sky-font-family);
  font-size: var(--sky-text-sm);
  background: var(--sky-surface-elevated);
  border: 1px solid var(--sky-border);
  border-radius: var(--sky-radius);
  color: var(--sky-text);
  transition: border-color var(--sky-transition);
}

.sky-input:focus {
  outline: none;
  border-color: var(--sky-primary);
}

.sky-input::placeholder {
  color: var(--sky-text-muted);
}

/* ============================================
   COMMON CARD STYLES
   ============================================ */

.sky-card {
  background: var(--sky-surface-card);
  border: 1px solid var(--sky-border);
  border-radius: var(--sky-radius-lg);
  padding: var(--sky-space-6);
}

.sky-card-hover:hover {
  border-color: var(--sky-primary);
  transform: translateY(-2px);
  box-shadow: var(--sky-shadow);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

.sky-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sky-scrollbar::-webkit-scrollbar-track {
  background: var(--sky-surface);
  border-radius: 4px;
}

.sky-scrollbar::-webkit-scrollbar-thumb {
  background: var(--sky-surface-hover);
  border-radius: 4px;
}

.sky-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--sky-text-muted);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes sky-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sky-slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes sky-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes sky-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sky-animate-fadeIn {
  animation: sky-fadeIn 0.3s ease;
}

.sky-animate-slideUp {
  animation: sky-slideUp 0.3s ease;
}

.sky-animate-pulse {
  animation: sky-pulse 2s infinite;
}

.sky-animate-spin {
  animation: sky-spin 1s linear infinite;
}