/* Both `:root` (light tokens) and `.dark` (dark overrides) live in the same
   `@layer base` so the cascade resolves them together. Without this layering
   the unlayered `:root` block wins against the layered `.dark` block, and
   the dark-mode variable swap silently fails. */
@layer base {
  :root {
  /* Both --font-sans-loaded and --font-heading-loaded are set by next/font
   * in apps/www/app/layout.tsx; the family-name fallbacks below kick in
   * for consumer apps that load fonts differently. */
  --font-sans: var(--font-sans-loaded), "DM Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-heading: var(--font-heading-loaded), "Noto Serif", ui-serif, Georgia, "Times New Roman", serif;

  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 45%;
  --success-foreground: 0 0% 100%;
  --attention: 38 92% 50%;
  --attention-foreground: 0 0% 100%;
  --info: 210 92% 45%;
  --info-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5% 64.9%;
  --radius: 0.5rem;

  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;

  /* Avatar fallback palette — muted tints of the brand hues. AvatarFallback
     hashes its initials to pick one, so each identity gets a stable splash of
     colour. Backgrounds stay soft; foregrounds are darkened to the same hue
     for legible initials. */
  --avatar-1: 12 55% 93%;
  --avatar-1-foreground: 12 48% 34%;
  --avatar-2: 173 42% 90%;
  --avatar-2-foreground: 173 50% 26%;
  --avatar-3: 210 65% 93%;
  --avatar-3-foreground: 210 55% 36%;
  --avatar-4: 43 75% 90%;
  --avatar-4-foreground: 38 62% 31%;
  --avatar-5: 280 48% 94%;
  --avatar-5-foreground: 280 42% 42%;
  --avatar-6: 142 42% 90%;
  --avatar-6-foreground: 142 52% 26%;

  --sidebar: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --success: 142 65% 40%;
    --success-foreground: 0 0% 100%;
    --attention: 38 92% 55%;
    --attention-foreground: 0 0% 100%;
    --info: 216 87% 55%;
    --info-foreground: 0 0% 100%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;

    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;

    /* Dark-mode avatar palette — deep muted backgrounds, light same-hue text. */
    --avatar-1: 12 32% 24%;
    --avatar-1-foreground: 12 70% 82%;
    --avatar-2: 173 28% 20%;
    --avatar-2-foreground: 173 50% 72%;
    --avatar-3: 210 35% 24%;
    --avatar-3-foreground: 210 65% 82%;
    --avatar-4: 38 32% 22%;
    --avatar-4-foreground: 43 72% 76%;
    --avatar-5: 280 30% 27%;
    --avatar-5-foreground: 280 55% 84%;
    --avatar-6: 142 28% 20%;
    --avatar-6-foreground: 142 48% 74%;

    --sidebar: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion (WCAG 2.1 SC 2.3.3)
   --------------------------------------------------------------------------
   Globally honour the user's OS-level prefers-reduced-motion setting.
   Animations and transitions are clamped to ~0ms so motion-driven UI still
   reaches its end-state visually, but without traversal. JS-driven motion
   that can't be expressed in CSS is additionally gated in component code. */
@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;
  }
}