/* ==========================================================================
   AstraDax - shared design foundation
   Fonts (self-hosted), tokens, focus ring, SweetAlert theme, motion safety.
   Loaded by every page before page-level styles.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces (one neutral family, slight cool tint) */
  --ax-bg: #0a0d12;
  --ax-surface: #10141b;
  --ax-surface-2: #151a23;
  --ax-surface-3: #1b212c;
  --ax-line: rgba(255, 255, 255, 0.08);
  --ax-line-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --ax-text: #f1f4f8;
  --ax-text-2: #b4bdca;
  --ax-text-3: #8591a3;

  /* Single accent + semantic colors */
  --ax-accent: #0ea5e9;
  --ax-accent-hover: #38bdf8;
  --ax-accent-press: #0284c7;
  --ax-accent-soft: rgba(14, 165, 233, 0.12);
  --ax-ok: #34d399;
  --ax-warn: #fbbf24;
  --ax-bad: #f87171;

  /* Shape scale: controls 10px, cards 16px */
  --ax-r-sm: 8px;
  --ax-r-md: 10px;
  --ax-r-lg: 16px;

  --ax-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ax-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ax-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ax-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ax-accent-press); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ax-accent-hover);
  outline-offset: 2px;
}

/* ---- SweetAlert2 theme (matches dark surfaces) ---- */
.swal2-popup {
  font-family: var(--ax-font) !important;
  background: var(--ax-surface-2) !important;
  color: var(--ax-text) !important;
  border: 1px solid var(--ax-line-strong) !important;
  border-radius: var(--ax-r-lg) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7) !important;
}
.swal2-title { color: var(--ax-text) !important; font-weight: 650 !important; font-size: 1.25rem !important; letter-spacing: -0.01em; }
.swal2-html-container { color: var(--ax-text-2) !important; font-size: 0.925rem !important; line-height: 1.6; }
.swal2-styled.swal2-confirm {
  background: var(--ax-accent-press) !important;
  border-radius: var(--ax-r-md) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
  border-radius: var(--ax-r-md) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.swal2-input, .swal2-textarea, .swal2-select {
  background: var(--ax-surface) !important;
  color: var(--ax-text) !important;
  border: 1px solid var(--ax-line-strong) !important;
  border-radius: var(--ax-r-md) !important;
  box-shadow: none !important;
}
.swal2-validation-message { background: var(--ax-surface-3) !important; color: var(--ax-bad) !important; }

@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;
  }
}