/*
 * ÁLFAR QUEST — design tokens
 * ---------------------------------------------------------------------------
 * Values extracted from the band's official store (loja.alfarquest.com.br),
 * active colour scheme "Meia-noite". See docs/brand-reference/DESIGN-TOKENS.md
 * for provenance. These are FALLBACK defaults: at runtime the application
 * overrides them from the SiteSetting table so an administrator can retune the
 * palette in Admin -> Website Appearance without a redeploy.
 */

:root {
  /* ---- Brand colours ---------------------------------------------------- */
  --aq-primary: #6c8cff;
  --aq-primary-foreground: #0b1020;
  --aq-accent: #8ea3d6;

  /* ---- Text ------------------------------------------------------------- */
  --aq-text-100: #f2f5ff;
  --aq-text-200: #dfe5f5;
  --aq-text-300: #b4bdd4;

  /* ---- Surfaces --------------------------------------------------------- */
  --aq-bg-100: #10152a;
  --aq-bg-200: #191f38;
  --aq-footer-bg: #0b0f1e;
  --aq-footer-bottom-bg: #070a15;

  /* ---- Derived / translucent helpers ------------------------------------ */
  --aq-border: rgb(142 163 214 / 22%);
  --aq-overlay: rgb(11 15 30 / 72%);
  --aq-shadow: 0 10px 30px rgb(0 0 0 / 35%);

  /*
   * Typography. Poppins/DM Sans are the official store fonts; "Noto Sans JP"
   * is appended because neither contains CJK glyphs and the site ships a
   * Japanese locale.
   */
  --aq-font-primary: "Poppins", "Noto Sans JP", system-ui, sans-serif;
  --aq-font-secondary: "DM Sans", "Noto Sans JP", system-ui, sans-serif;

  /* ---- Type scale ------------------------------------------------------- */
  --aq-text-xs: 0.75rem;
  --aq-text-sm: 0.875rem;
  --aq-text-base: 1rem;
  --aq-text-lg: 1.125rem;
  --aq-text-xl: 1.5rem;
  --aq-text-2xl: 2rem;
  --aq-text-3xl: 2.5rem;
  --aq-text-hero: clamp(2.25rem, 6vw, 4.5rem);

  /* ---- Spacing / layout ------------------------------------------------- */
  --aq-space-1: 0.25rem;
  --aq-space-2: 0.5rem;
  --aq-space-3: 0.75rem;
  --aq-space-4: 1rem;
  --aq-space-6: 1.5rem;
  --aq-space-8: 2rem;
  --aq-space-12: 3rem;
  --aq-space-16: 4rem;

  --aq-radius-sm: 4px;
  --aq-radius: 8px;
  --aq-radius-lg: 16px;
  --aq-radius-pill: 999px;

  --aq-content-width: 1200px;
  --aq-header-height: 72px;

  --aq-transition: 180ms ease;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --aq-transition: 0ms;
  }
}