/*
 * APEX MOTION ENGINE — app.css
 * Shared app-shell CSS custom properties. Mirrors DO-NOT-CHANGE-EVER.md palette exactly.
 * Include in every top-level app page (index.html, library.html, etc.).
 * Generated 2026-05-30 by E14.
 */

/* ─── FONT STACK ──────────────────────────────────────────────────────────── */

:root {
  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* ─── PRIMARY BRAND ───────────────────────────────────────────────────────── */

:root {
  --apex-primary:   #635bff;
  --apex-hover:     #5851e6;
  --apex-gradient:  linear-gradient(135deg, #7a73ff 0%, #635bff 35%, #4f46e5 65%, #2563eb 100%);
}

/* ─── ACCENTS ─────────────────────────────────────────────────────────────── */

:root {
  --accent-lilac:    #a8a3ff;
  --accent-soft:     #b8b3ff;
  --accent-pale:     #cdd2ff;
  --accent-royal:    #4f7dff;
  --accent-electric: #2563eb;
}

/* ─── BACKGROUNDS ─────────────────────────────────────────────────────────── */

:root {
  --bg-void:  #06081a;  /* Deepest background — page root, full-bleed hero sections */
  --bg-abyss: #08091a;  /* Section containers */
  --bg-deep:  #0a0c1e;  /* Standard card/panel background */
  --bg-navy:  #0a0e1f;  /* Elevated surface — modals, drawers */
}

/* ─── SURFACES ────────────────────────────────────────────────────────────── */

:root {
  --surface-pearl: #f4f5f8;
  --surface-white: #fafbfc;
  --surface-mist:  #f7f8fa;
  --surface-warm:  #fdfcfb;
}

/* ─── MID-TONES ───────────────────────────────────────────────────────────── */

:root {
  --mid-deep:  #1a1f36;
  --mid-slate: #3c4257;
  --mid-muted: #697386;
  --mid-soft:  #8792a2;
  --mid-light: #a4a9bd;
}

/* ─── SHELL RESET ─────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* 16px = base for all rem calculations */
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-void);
  color: var(--surface-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* ─── ANIMATOR FOUNDATIONS ────────────────────────────────────────────────── */

/* will-change on elements the GSAP entrance loop will animate */
.animated-card,
.nav-tile,
.scroll-panel,
.particle-layer,
.hero-headline,
.counter-display {
  will-change: transform; /* Promotes to compositor layer pre-emptively */
}