/**
 * BITCORE Office Suite - Base Styles
 * Enterprise-grade CSS architecture with theme support
 * @version 1.0.0
 */

/* ========================================
   CSS VARIABLES (Design Tokens)
   ======================================== */

:root {
  /* Colors - Dark Theme (Default) */
  --bf-bg-primary: #0b0b0b;
  --bf-bg-secondary: #0f0f0f;
  --bf-bg-tertiary: #1a1a1a;
  --bf-bg-elevated: #222222;

  --bf-text-primary: #ffffff;
  --bf-text-secondary: #a0a0a0;
  --bf-text-tertiary: #666666;
  --bf-text-muted: #444444;

  --bf-border-primary: #333333;
  --bf-border-secondary: #222222;
  --bf-border-accent: #444444;

  /* Accent Colors */
  --bf-accent-primary: #4ade80;
  --bf-accent-secondary: #22c55e;
  --bf-accent-tertiary: #16a34a;

  --bf-warning: #fbbf24;
  --bf-error: #ef4444;
  --bf-info: #3b82f6;
  --bf-purple: #a855f7;

  /* Spacing Scale */
  --bf-space-xs: 4px;
  --bf-space-sm: 8px;
  --bf-space-md: 16px;
  --bf-space-lg: 24px;
  --bf-space-xl: 32px;
  --bf-space-2xl: 48px;
  --bf-space-3xl: 64px;

  /* Typography */
  --bf-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bf-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --bf-text-xs: 11px;
  --bf-text-sm: 12px;
  --bf-text-md: 14px;
  --bf-text-lg: 16px;
  --bf-text-xl: 20px;
  --bf-text-2xl: 24px;
  --bf-text-3xl: 32px;

  /* Border Radius */
  --bf-radius-sm: 6px;
  --bf-radius-md: 10px;
  --bf-radius-lg: 14px;
  --bf-radius-xl: 20px;
  --bf-radius-full: 9999px;

  /* Shadows */
  --bf-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --bf-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --bf-shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
  --bf-shadow-glow: 0 0 20px rgba(74, 222, 128, 0.15);

  /* Transitions */
  --bf-transition-fast: 150ms ease;
  --bf-transition-normal: 250ms ease;
  --bf-transition-slow: 400ms ease;

  /* Layout */
  --bf-header-height: 64px;
  --bf-sidebar-width: 280px;
  --bf-max-content-width: 1400px;
}

/* ========================================
   RESET & BASE
   ======================================== */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--bf-font-sans);
  font-size: var(--bf-text-md);
  line-height: 1.5;
  color: var(--bf-text-primary);
  background: var(--bf-bg-primary);
  min-height: 100vh;
}

/* WordPress overrides */
body.bitcore-office-suite {
  background: var(--bf-bg-primary) !important;
}

.bitcore-office-suite #page,
.bitcore-office-suite .site-content,
.bitcore-office-suite .content-area {
  background: transparent !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

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

.bf-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;
}

.bf-flex { display: flex; }
.bf-flex-col { flex-direction: column; }
.bf-items-center { align-items: center; }
.bf-justify-center { justify-content: center; }
.bf-justify-between { justify-content: space-between; }
.bf-gap-sm { gap: var(--bf-space-sm); }
.bf-gap-md { gap: var(--bf-space-md); }
.bf-gap-lg { gap: var(--bf-space-lg); }

.bf-text-center { text-align: center; }
.bf-text-left { text-align: left; }
.bf-text-right { text-align: right; }

.bf-m-0 { margin: 0; }
.bf-mt-sm { margin-top: var(--bf-space-sm); }
.bf-mt-md { margin-top: var(--bf-space-md); }
.bf-mb-sm { margin-bottom: var(--bf-space-sm); }
.bf-mb-md { margin-bottom: var(--bf-space-md); }

.bf-p-sm { padding: var(--bf-space-sm); }
.bf-p-md { padding: var(--bf-space-md); }
.bf-p-lg { padding: var(--bf-space-lg); }

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

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

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

@keyframes bf-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bf-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes bf-glow {
  0%, 100% { box-shadow: 0 0 5px var(--bf-accent-primary); }
  50% { box-shadow: 0 0 20px var(--bf-accent-primary), 0 0 40px var(--bf-accent-secondary); }
}

.bf-animate-fade-in {
  animation: bf-fade-in 0.4s ease-out;
}

.bf-animate-slide-in {
  animation: bf-slide-in-right 0.3s ease-out;
}

.bf-animate-pulse {
  animation: bf-pulse 2s ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}