/* ============================================================
 * prime-aurora.css — NextGen Prime Aurora Design Tokens Bridge (v20260801)
 * Bridges @nextgenprime/tokens variables to --ngp-* custom properties
 * across all static applications. Enforces WCAG 2.1 AA/AAA compliance.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400&family=Sora:wght@400;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Brand Colors */
  --ngp-purple-700: #4F32C3;
  --ngp-purple-600: #6A4BEE;
  --ngp-purple-500: #8B6CFF;
  --ngp-purple-400: #A38CFF;
  --ngp-purple-300: #C7C1EC;

  /* Prime Aurora Glass & Surface Tokens */
  --ngp-bg: #f4f5fb;
  --ngp-bg-elevated: #ffffff;
  --ngp-card: rgba(255, 255, 255, 0.92);
  --ngp-tx: #15162a;
  --ngp-text-primary: #15162a;
  --ngp-text-secondary: #4a4d68;
  --ngp-mut: #4a4d68;
  --ngp-dim: #7a7d93;
  --ngp-bd: rgba(20, 22, 52, 0.12);
  --ngp-border-glass: rgba(20, 22, 52, 0.12);
  --ngp-panel2: rgba(255, 255, 255, 0.6);
  --ngp-surface-glass: rgba(255, 255, 255, 0.6);
  --ngp-acc: #6a4bee;
  --ngp-accent: #6a4bee;
  --ngp-grad: linear-gradient(135deg, #6a4bee, #8b6cff);
  --ngp-gradient-accent: linear-gradient(135deg, #6a4bee, #8b6cff);

  /* Accessibility & Focus Tokens */
  --ngp-font-heading: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --ngp-font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --ngp-font-mono: 'JetBrains Mono', monospace;
  --ngp-focus-ring: 0 0 0 3px rgba(106, 75, 238, 0.45);
  --ngp-touch-min: 48px;

  /* Spacing Scale */
  --ngp-space-1: 4px;
  --ngp-space-2: 8px;
  --ngp-space-3: 12px;
  --ngp-space-4: 16px;
  --ngp-space-5: 20px;
  --ngp-space-6: 24px;
  --ngp-space-7: 28px;
  --ngp-space-8: 32px;
}

:root[data-theme="dark"] {
  --ngp-bg: #07070e;
  --ngp-bg-elevated: #151C2C;
  --ngp-card: rgba(26, 26, 42, 0.92);
  --ngp-tx: #eef0f8;
  --ngp-text-primary: #F4F2FF;
  --ngp-text-secondary: #C7C1EC;
  --ngp-mut: #a6a9be;
  --ngp-dim: #71748c;
  --ngp-bd: rgba(255, 255, 255, 0.12);
  --ngp-border-glass: rgba(255, 255, 255, 0.12);
  --ngp-panel2: rgba(32, 32, 50, 0.55);
  --ngp-surface-glass: rgba(255, 255, 255, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --ngp-bg: #07070e;
    --ngp-bg-elevated: #151C2C;
    --ngp-card: rgba(26, 26, 42, 0.92);
    --ngp-tx: #eef0f8;
    --ngp-text-primary: #F4F2FF;
    --ngp-text-secondary: #C7C1EC;
    --ngp-mut: #a6a9be;
    --ngp-dim: #71748c;
    --ngp-bd: rgba(255, 255, 255, 0.12);
    --ngp-border-glass: rgba(255, 255, 255, 0.12);
    --ngp-panel2: rgba(32, 32, 50, 0.55);
    --ngp-surface-glass: rgba(255, 255, 255, 0.07);
  }
}

/* Accessibility Focus & Touch Target Rules */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important;
  box-shadow: var(--ngp-focus-ring) !important;
  border-color: var(--ngp-purple-500) !important;
}

button, a.btn, input[type="submit"], input[type="button"] {
  min-height: var(--ngp-touch-min);
  touch-action: manipulation;
}

/* Reduced Motion Overrides */
@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;
  }
}