/* ═══════════════════════════════════════════════════════════════════════
   Alert Enterprise — Design System (full reference)
   ─────────────────────────────────────────────────────────────────────
   This file is the unabridged AE design system vendored from the
   official brand design system folder. It combines colors+type with
   components and is safe to import in full (e.g. for future
   product surfaces that want to fully adopt AE styling).

   DO NOT import this into the artifact-viewer injection pipeline —
   that uses /ae-brand/ae-inject.css, which is a lower-specificity
   subset designed to overlay arbitrary third-party HTML without
   fighting its existing styles.
   ═══════════════════════════════════════════════════════════════════════ */

/* DM Mono fallback for the monospace slot (still via Google Fonts —
   only Aeonik is self-hosted). */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

/* ── Aeonik (self-hosted, licensed internal use only) ──────────────── */
@font-face {
  font-family: 'Aeonik';
  src: url('/ae-brand/fonts/Aeonik-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('/ae-brand/fonts/Aeonik-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('/ae-brand/fonts/Aeonik-Regular.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('/ae-brand/fonts/Aeonik-Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('/ae-brand/fonts/Aeonik-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('/ae-brand/fonts/Aeonik-Bold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand primitives — purple scale (hero) ────────────────────── */
  --ae-purple-50:  #F1EFFC;
  --ae-purple-100: #E4E0FA;
  --ae-purple-200: #C7BFF4;
  --ae-purple-300: #A99EEE;
  --ae-purple-400: #8B7DE8;
  --ae-purple-500: #5F51D5;   /* hero primary */
  --ae-purple-600: #4A3EC1;
  --ae-purple-700: #3A2FA0;
  --ae-purple-800: #2B2478;
  --ae-purple-900: #1B174D;
  --ae-purple-950: #0E0B2E;

  /* ── Brand primitives — coral scale (accent) ───────────────────── */
  --ae-coral-50:   #FFF0ED;
  --ae-coral-100:  #FFDDD5;
  --ae-coral-200:  #FFB8A8;
  --ae-coral-300:  #FF8F7A;
  --ae-coral-400:  #FF6B4E;
  --ae-coral-500:  #FF5233;
  --ae-coral-600:  #F9423A;
  --ae-coral-700:  #D02F1F;

  /* ── Brand primitives — ink scale (neutral) ────────────────────── */
  --ae-ink-950: #0A0A12;
  --ae-ink-900: #111118;
  --ae-ink-800: #1A1A24;
  --ae-ink-700: #262626;
  --ae-ink-600: #3B3B47;
  --ae-ink-500: #5A5A68;
  --ae-ink-400: #8A8A96;
  --ae-ink-300: #B5B5BE;
  --ae-ink-200: #D9D9D9;
  --ae-ink-100: #ECECEF;
  --ae-ink-50:  #F6F6F8;
  --ae-white:   #FFFFFF;

  /* ── Semantic signal colors ────────────────────────────────────── */
  --ae-success: #1F9D6E;
  --ae-warning: #F2B341;
  --ae-danger:  #E0425C;
  --ae-info:    #4A8BF5;

  /* ── Semantic surfaces ─────────────────────────────────────────── */
  --bg: var(--ae-white);
  --bg-muted: var(--ae-ink-50);
  --bg-elevated: var(--ae-white);
  --bg-inverse: var(--ae-ink-950);
  --bg-brand: var(--ae-purple-500);
  --bg-brand-soft: var(--ae-purple-50);

  --fg: var(--ae-ink-900);
  --fg-1: var(--ae-ink-900);
  --fg-2: var(--ae-ink-600);
  --fg-3: var(--ae-ink-500);
  --fg-muted: var(--ae-ink-400);
  --fg-on-brand: var(--ae-white);
  --fg-on-dark: var(--ae-white);
  --fg-brand: var(--ae-purple-600);
  --fg-accent: var(--ae-coral-500);

  --border: #E6E4F0;
  --border-strong: #CFCCE0;
  --border-inverse: rgba(255,255,255,0.14);

  /* ── Signature gradients (organic, not linear per brand) ───────── */
  --grad-hero: radial-gradient(120% 90% at 15% 20%, #6B5BE6 0%, #5F51D5 35%, #3A2FA0 70%, #1B174D 100%);
  --grad-ember: radial-gradient(90% 90% at 80% 30%, #FF8F7A 0%, #FF5233 45%, #F9423A 70%, #5F51D5 100%);
  --grad-violet-coral: linear-gradient(112deg, #5F51D5 0%, #7A3FBF 45%, #F9423A 100%);
  --grad-subtle: linear-gradient(180deg, #F6F3FF 0%, #FFFFFF 100%);
  --grad-ink: linear-gradient(180deg, #0E0B2E 0%, #1B174D 60%, #2B2478 100%);

  /* ── Typography ────────────────────────────────────────────────── */
  --font-sans: 'Aeonik', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Aeonik', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  --fs-display-2xl: clamp(56px, 7vw, 104px);
  --fs-display-xl:  clamp(44px, 5.5vw, 80px);
  --fs-display-lg:  clamp(36px, 4.2vw, 60px);
  --fs-h1: clamp(32px, 3.2vw, 48px);
  --fs-h2: clamp(26px, 2.4vw, 36px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lg: 18px;
  --fs-base: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-micro: 11px;

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.5;
  --lh-tight: 1.22;

  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-body: -0.005em;
  --tracking-eyebrow: 0.14em;

  /* ── Spacing scale (4pt grid) ──────────────────────────────────── */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-3xl: 36px;
  --r-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(14,11,46,0.06);
  --shadow-sm: 0 2px 6px rgba(14,11,46,0.06), 0 1px 2px rgba(14,11,46,0.04);
  --shadow-md: 0 8px 24px rgba(14,11,46,0.08), 0 2px 6px rgba(14,11,46,0.05);
  --shadow-lg: 0 18px 48px rgba(14,11,46,0.12), 0 6px 16px rgba(14,11,46,0.06);
  --shadow-xl: 0 32px 80px rgba(14,11,46,0.18), 0 12px 28px rgba(14,11,46,0.08);
  --shadow-brand: 0 18px 48px rgba(95,81,213,0.28), 0 6px 16px rgba(95,81,213,0.18);
  --shadow-coral: 0 14px 40px rgba(255,82,51,0.28), 0 4px 12px rgba(249,66,58,0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ═══════════════════════════════════════════════════════════════════════
   Component primitives — buttons, cards, chips, inputs, icon tiles,
   dividers, utility backdrops.
   ═══════════════════════════════════════════════════════════════════════ */

.ae-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.ae-btn:active { transform: scale(0.98); }

.ae-btn--primary {
  background: var(--ae-ink-950);
  color: var(--ae-white);
  box-shadow: var(--shadow-md), var(--shadow-inset);
}
.ae-btn--primary:hover {
  background: var(--ae-purple-700);
  box-shadow: var(--shadow-brand);
}

.ae-btn--brand {
  background: var(--grad-violet-coral);
  color: var(--ae-white);
  box-shadow: var(--shadow-brand);
}
.ae-btn--brand:hover { filter: brightness(1.06); box-shadow: var(--shadow-coral); }

.ae-btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-strong);
}
.ae-btn--ghost:hover { background: var(--ae-ink-50); border-color: var(--ae-ink-700); }

.ae-btn--sm { padding: 8px 14px; font-size: 13px; }
.ae-btn--lg { padding: 16px 28px; font-size: 16px; }

.ae-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.ae-card--elevated { box-shadow: var(--shadow-md); }
.ae-card--brand { background: var(--grad-hero); color: var(--ae-white); border: none; box-shadow: var(--shadow-brand); }

.ae-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--ae-purple-50);
  color: var(--ae-purple-700);
  border: 1px solid var(--ae-purple-100);
}
.ae-chip--coral { background: var(--ae-coral-50); color: var(--ae-coral-700); border-color: #FFD7CD; }
.ae-chip--ink { background: var(--ae-ink-100); color: var(--ae-ink-800); border-color: var(--ae-ink-200); }

.ae-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--fg-1);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.ae-input:focus {
  outline: none;
  border-color: var(--ae-purple-500);
  box-shadow: 0 0 0 4px rgba(95,81,213,0.14);
}

.ae-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.ae-grad-text {
  background: var(--grad-violet-coral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}