/* ==========================================================================
   Ambassador Horizon — Design Tokens (v7.0.0)
   drijezie.com unified design system
   --------------------------------------------------------------------------
   Extends :root from global.css with semantic tokens, surfaces, motion,
   elevation, and typography scales. Every page on drijezie.com reads from
   these tokens; never hardcode color/radius/duration values.

   Load order: global.css  →  design-tokens.css  →  page-specific CSS
   ========================================================================== */

:root {
  /* ---------- Surfaces (depth stack) ---------- */
  --ah-surface-0: #05060f;                           /* deepest void */
  --ah-surface-1: rgba(15, 18, 36, 0.72);            /* base card (glass) */
  --ah-surface-2: rgba(24, 28, 52, 0.78);            /* elevated card */
  --ah-surface-3: rgba(36, 40, 68, 0.92);            /* modal / palette */
  --ah-surface-blur: 12px;                            /* glass blur */
  --ah-surface-ring: inset 0 0 0 1px rgba(255,255,255,0.04);

  /* ---------- Accents (theme-driven; fall back to purple/cyan) ---------- */
  --ah-accent:    var(--theme-accent,  #a855f7);
  --ah-accent-2:  var(--theme-accent2, #06b6d4);
  --ah-accent-ink:#ffffff;
  --ah-glow:      var(--theme-glow,    rgba(168,85,247,0.25));

  /* ---------- Semantic ---------- */
  --ah-success: #10b981;
  --ah-warn:    #f59e0b;
  --ah-danger:  #ef4444;
  --ah-info:    #3b82f6;

  /* ---------- Text (inherits from global.css where set) ---------- */
  --ah-text-1:  var(--theme-text,  #e9edf5);
  --ah-text-2:  var(--theme-text2, #9aa5b8);
  --ah-text-3:  #64748b;
  --ah-text-on-accent: #ffffff;

  /* ---------- Radii ---------- */
  --ah-r-1: 6px;
  --ah-r-2: 10px;
  --ah-r-3: 14px;
  --ah-r-4: 20px;
  --ah-r-pill: 999px;

  /* ---------- Elevation ---------- */
  --ah-elev-1: 0 2px 8px rgba(0,0,0,0.25);
  --ah-elev-2: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
  --ah-elev-3: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
  --ah-glow-soft: 0 0 24px var(--ah-glow);
  --ah-glow-hard: 0 0 40px var(--ah-glow);

  /* ---------- Motion ---------- */
  --ah-dur-1:  80ms;
  --ah-dur-2: 160ms;
  --ah-dur-3: 240ms;
  --ah-dur-4: 380ms;
  --ah-dur-5: 600ms;
  --ah-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ah-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ah-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Typography scale ---------- */
  --ah-font-display: 'Orbitron', 'Rajdhani', sans-serif;
  --ah-font-ui:      'Outfit', system-ui, -apple-system, sans-serif;
  --ah-font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --ah-fs-1: 0.72rem;    /* micro label */
  --ah-fs-2: 0.82rem;    /* caption */
  --ah-fs-3: 0.95rem;    /* body */
  --ah-fs-4: 1.1rem;     /* body-lg */
  --ah-fs-5: 1.35rem;    /* h3 */
  --ah-fs-6: 1.75rem;    /* h2 */
  --ah-fs-7: 2.4rem;     /* h1 */
  --ah-fs-8: clamp(2.5rem, 6vw, 3.8rem); /* display */
  --ah-lh-tight: 1.2;
  --ah-lh-body:  1.55;
  --ah-ls-display: 0.04em;
  --ah-ls-label:   0.12em;

  /* ---------- Focus ring (a11y) ---------- */
  --ah-ring: 0 0 0 2px var(--ah-surface-0), 0 0 0 4px var(--ah-accent);

  /* ---------- Grid overlay (optional) ---------- */
  --ah-grid-bg: linear-gradient(rgba(168,85,247,0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(168,85,247,0.04) 1px, transparent 1px);
  --ah-grid-size: 32px 32px;
}

/* ==========================================================================
   Utility classes (opt-in, namespaced .ah-*)
   ========================================================================== */

.ah-card {
  background: var(--ah-surface-1);
  backdrop-filter: blur(var(--ah-surface-blur));
  -webkit-backdrop-filter: blur(var(--ah-surface-blur));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--ah-r-3);
  box-shadow: var(--ah-elev-2);
  padding: 1.25rem;
  transition: transform var(--ah-dur-3) var(--ah-ease-out-expo),
              box-shadow var(--ah-dur-3) var(--ah-ease-out-expo),
              border-color var(--ah-dur-2) var(--ah-ease-standard);
}
.ah-card:hover {
  transform: translateY(-2px);
  border-color: rgba(168,85,247,0.35);
  box-shadow: var(--ah-elev-3), var(--ah-glow-soft);
}
.ah-card--elevated { background: var(--ah-surface-2); }

.ah-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--ah-r-2);
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--ah-surface-2);
  color: var(--ah-text-1);
  font-family: var(--ah-font-ui);
  font-weight: 600;
  font-size: var(--ah-fs-3);
  cursor: pointer;
  transition: transform var(--ah-dur-2) var(--ah-ease-spring),
              background var(--ah-dur-2) var(--ah-ease-standard),
              border-color var(--ah-dur-2) var(--ah-ease-standard);
}
.ah-btn:hover { transform: translateY(-1px); border-color: var(--ah-accent); }
.ah-btn:active { transform: translateY(0); }
.ah-btn:focus-visible { outline: none; box-shadow: var(--ah-ring); }
.ah-btn--primary {
  background: linear-gradient(135deg, var(--ah-accent), var(--ah-accent-2));
  border-color: transparent;
  color: var(--ah-text-on-accent);
}
.ah-btn--ghost { background: transparent; }
.ah-btn--danger { background: var(--ah-danger); border-color: transparent; color:#fff; }

.ah-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--ah-r-pill);
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.3);
  color: var(--ah-accent);
  font-family: var(--ah-font-display);
  font-size: var(--ah-fs-1);
  font-weight: 700;
  letter-spacing: var(--ah-ls-label);
  text-transform: uppercase;
}

.ah-label {
  font-family: var(--ah-font-display);
  font-size: var(--ah-fs-1);
  font-weight: 700;
  letter-spacing: var(--ah-ls-label);
  text-transform: uppercase;
  color: var(--ah-text-2);
}

.ah-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: var(--ah-surface-1);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--ah-r-3);
  min-width: 160px;
}
.ah-kpi__value {
  font-family: var(--ah-font-display);
  font-size: var(--ah-fs-6);
  font-weight: 800;
  color: var(--ah-accent);
  line-height: var(--ah-lh-tight);
}
.ah-kpi__label { font: 700 var(--ah-fs-1)/1 var(--ah-font-ui); color: var(--ah-text-3); letter-spacing: var(--ah-ls-label); text-transform: uppercase; }

/* ==========================================================================
   Motion helpers
   ========================================================================== */

.ah-fade-in { animation: ahFadeIn var(--ah-dur-4) var(--ah-ease-out-expo) both; }
.ah-slide-up { animation: ahSlideUp var(--ah-dur-4) var(--ah-ease-spring) both; }
.ah-pulse-glow { animation: ahPulseGlow 2.4s var(--ah-ease-standard) infinite; }

@keyframes ahFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ahSlideUp  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ahPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--ah-glow); }
  50%      { box-shadow: 0 0 28px 2px var(--ah-glow); }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ah-card:hover { transform: none; }
  .ah-btn:hover  { transform: none; }
}

@media (forced-colors: active) {
  .ah-card, .ah-btn, .ah-kpi { border-color: CanvasText; }
}