/**
 * ============================================
 * BASE STYLES
 * ============================================
 * Foundation styles that apply to the entire application
 * Uses CSS variables from config.css
 */

/* ==================== HTML & BODY ==================== */

html {
  /* Prevents white flash on load - default to dark mode colors */
  background-color: var(--color-bg-dark);
  color: var(--color-text-dark);
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  overflow-x: hidden;
  position: relative;
  
  /* Smooth theme transitions */
  transition: 
    background-color var(--duration-normal) var(--ease-in-out),
    color var(--duration-normal) var(--ease-in-out);
}


/* ==================== CANVAS BACKGROUND ==================== */

#blockchainCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-background);
  pointer-events: none; /* Allow clicks to pass through */
}


/* ==================== TYPOGRAPHY DEFAULTS ==================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

p {
  line-height: var(--line-height-relaxed);
}

strong {
  font-weight: var(--font-weight-bold);
}

em {
  font-style: italic;
}


/* ==================== SELECTION STYLES ==================== */

::selection {
  background-color: var(--color-primary);
  color: white;
}

::-moz-selection {
  background-color: var(--color-primary);
  color: white;
}


/* ==================== SCROLLBAR STYLES ==================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
}


/* ==================== FOCUS STYLES ==================== */

/* Remove default focus outline, add custom one */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--color-accent-cyan);
  outline-offset: 4px;
  border-radius: var(--border-radius-sm);
}


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

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

/* Skip to main content link */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: var(--space-sm) var(--space-md);
  z-index: var(--z-toast);
  transition: top var(--duration-fast) var(--ease-out);
}

.skip-to-content:focus {
  top: 0;
}


/* ==================== LOADING STATE ==================== */

/* Prevent FOUC (Flash of Unstyled Content) */
.loading body {
  opacity: 0;
}

body {
  opacity: 1;
  transition: opacity var(--duration-slow) var(--ease-out);
}


/* ==================== ERROR STATES ==================== */

/* Global error message styling */
.error-message {
  color: var(--color-error);
  font-size: var(--font-size-body-sm);
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.error-message::before {
  content: '⚠️';
  font-size: 1em;
}


/* ==================== SUCCESS STATES ==================== */

.success-message {
  color: var(--color-success);
  font-size: var(--font-size-body-sm);
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.success-message::before {
  content: '✓';
  font-size: 1em;
  font-weight: var(--font-weight-bold);
}