/*
  Design tokens - the single place to change colors/backgrounds/spacing
  across the whole site. Everything else references these variables.

  Palette is derived straight from the animated "A" mark (/a-logo.svg,
  /a-logo_an.svg): sky-blue strokes fading into violet, with a light,
  white-first canvas so the mark keeps its contrast. Light is the only
  look the site ships - there is deliberately no dark-mode override.
*/
:root {
  /* Brand colors - sampled from the logo's blue -> violet stroke gradient */
  --color-primary: #6c63ff;
  --color-primary-dark: #4a3fe0;
  --color-primary-light: #5a4fd6;
  --color-accent: #2b84e0;
  --color-accent-dark: #1f68b8;

  /* Neutrals - soft white canvas the logo was designed for */
  --color-bg: #faf9ff;
  --color-bg-alt: #f1effe;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f4ff;
  --color-border: #e5e3fb;
  --color-text: #1c1a2e;
  --color-text-muted: #5b5878;
  --color-text-dim: #6e6c89;

  /* Semantic */
  --color-success: #1c7a44;
  --color-warning: #b8830a;
  --color-danger: #b34151;

  /* Gradients - blue-to-violet, mirroring the two logo strokes */
  --gradient-brand: linear-gradient(135deg, #4fa8ff 0%, #6c63ff 55%, #8e6cff 100%);
  --gradient-hero: radial-gradient(circle at 15% 0%, rgba(79, 168, 255, 0.18), transparent 42%),
    radial-gradient(circle at 85% 10%, rgba(142, 108, 255, 0.18), transparent 42%),
    radial-gradient(circle at 50% 110%, rgba(108, 99, 255, 0.10), transparent 55%),
    var(--color-bg);

  /* Typography */
  --font-family: 'Heebo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.92rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-size-4xl: 3.5rem;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Radius & shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 8px rgba(28, 26, 46, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 26, 46, 0.10);
  --shadow-lg: 0 20px 60px rgba(28, 26, 46, 0.14);
  --shadow-glow: 0 0 0 1px rgba(108, 99, 255, 0.35), 0 0 40px rgba(108, 99, 255, 0.20);

  --container-width: 1160px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}

/* Splash preloader - shown for a beat on every full page load, mirroring
   the animated logo mark so first paint feels intentional instead of a
   blank flash. JS (in the preloader partial) fades + removes it; skipped
   outright for prefers-reduced-motion. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  transition: opacity 0.5s ease;
}

.preloader-logo {
  width: 92px;
  height: 92px;
  filter: drop-shadow(0 10px 34px rgba(108, 99, 255, 0.35));
}

.preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    display: none;
  }
}

/* Site-wide visible keyboard focus ring (WCAG 2.4.7) - a fallback for any
   interactive element that doesn't define its own focus style. Only
   :focus-visible (not plain :focus) so mouse/touch clicks don't show a ring
   the way a native browser outline would. Anything with a more specific
   focus rule elsewhere (e.g. .field input:focus) still wins via
   specificity/order, this is just the baseline nothing should fall through
   without. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* "Skip to main content" link - off-screen until it receives keyboard
   focus (Tab from the very top of the page), so a keyboard user isn't
   forced through the full nav/sidebar on every single page. */
.skip-link {
  position: absolute;
  top: -1000px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.skip-link:focus {
  top: 8px;
}