/* 
 * PROJECT: CPM Community Wall v3.5 Empire Studio
 * FILE: design-tokens.css
 * PURPOSE: Immutable design tokens, glass surfaces, and animation specifications.
 * CONSTRAINTS: Zero external dependencies, zero JS, strict 8px spacing grid, system font fallbacks.
 */

:root {
  /* Immutable Base Tokens */
  --bg-obsidian: #0a0a0f;
  --violet: #7c3aed;
  --cyan: #06b6d4;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --text-14: 14px;
  --text-16: 16px;
  --text-20: 20px;
  --text-24: 24px;
  --line-height-base: 1.5;

  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  
  /* Surfaces, Borders, and Dividers */
  --surface-elevated: #12121a;
  --surface-raised: #1a1a24;
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.15);
  --divider: rgba(255, 255, 255, 0.08);

  /* Spacing Grid (8px base) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --safe-area-bottom: env(safe-area-inset-bottom, 16px);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Interaction & State */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --focus-ring: 2px solid var(--violet);
  --disabled-opacity: 0.5;

  /* Skeleton Surfaces */
  --skeleton-bg: linear-gradient(90deg, #12121a 0%, #1a1a24 50%, #12121a 100%);
}

/* 
 * Glass Surface Specification 
 */
.glass-panel {
  background-color: #12121a; /* Fallback for browsers without backdrop-filter */
  background-color: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

/* 
 * Interaction States
 */
.interactive-hover {
  transition: filter var(--transition-fast);
}
.interactive-hover:hover {
  filter: brightness(1.1);
}

.interactive-active {
  transition: transform var(--transition-fast);
}
.interactive-active:active:not(:disabled) {
  transform: scale(0.98);
}

.interactive-focus:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.state-disabled,
:disabled {
  opacity: var(--disabled-opacity);
  pointer-events: none;
  cursor: not-allowed;
}

/* 
 * Animation Specifications 
 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Animation Utility Classes */
.animate-fade-in {
  animation: fadeIn 200ms ease forwards;
}

.animate-slide-up {
  animation: slideUp 250ms ease forwards;
}

.skeleton-shimmer {
  background: var(--skeleton-bg);
  background-size: 400% 100%;
  animation: shimmer 1.5s infinite linear;
}

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