/**
 * Shared - Base Styles & Utilities
 *
 * @package AskCollab Auth
 * @version 1.0.0
 */

/* ========================================
   M3 Design System Variables (Global)
   ======================================== */
:root {
  --m3-navy: #001d35;
  --m3-emerald: #00875a;
  --m3-gold: #b45309;
  --m3-red: #b91c1c;
  --m3-secondary: #535f70;
  --m3-surface: #f1f4f9;
  --m3-white: #ffffff;
  --m3-border: #c4c6d0;
  --m3-dashed: #8c939d;
  --radius-xl: 32px;
  --radius-md: 16px;
  --radius-sm: 8px;
  --font-human: 'Plus Jakarta Sans', sans-serif;
  --font-machine: 'IBM Plex Mono', monospace;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
}

/* Global Container */
.aca-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  box-sizing: border-box;
}

/* Base Body Styles */
body {
  font-family: var(--font-human);
  color: var(--m3-navy);
  background: var(--m3-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Typography Helpers */
.aca-mono { font-family: var(--font-machine); letter-spacing: -0.02em; }
.aca-human { font-family: var(--font-human); }
.aca-text-sm { font-size: 0.875rem; }
.aca-text-xs { font-size: 0.75rem; }
.aca-text-muted { color: var(--m3-secondary); }

/* Animations */
@keyframes aca-fade-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Utilities */
.aca-hidden { display: none !important; }
.aca-visible { display: block !important; }