@tailwind base;
@tailwind components;
@tailwind utilities;

/* Theme tokens — values ported 1-to-1 from References/slp-software-rood.html (red, default)
   and References/slp-software.html (purple, alternate). See
   aidlc-docs/features/react-frontend/construction/react-frontend-app/functional-design/domain-entities.md
   (ThemeTokens) for the data model these mirror. */
.theme-red {
  --color-bg: #140c0e;
  --color-surface: #1f1315;
  --color-surface-2: #291719;
  --color-line: #402226;
  --color-text: #f5eaeb;
  --color-muted: #b69c9f;
  --color-accent: #e04848;
  --color-accent-soft: rgba(224, 72, 72, 0.16);
  --color-accent-line: rgba(224, 72, 72, 0.4);
  --color-accent-hover: #ea6161;
  --color-accent-contrast: #140c0e;
}

.theme-purple {
  --color-bg: #0e1220;
  --color-surface: #151a2c;
  --color-surface-2: #1b2138;
  --color-line: #262e4a;
  --color-text: #e9ebf5;
  --color-muted: #98a0ba;
  --color-accent: #8b7cff;
  --color-accent-soft: rgba(139, 124, 255, 0.14);
  --color-accent-line: rgba(139, 124, 255, 0.35);
  --color-accent-hover: #9d90ff;
  --color-accent-contrast: #0e1220;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Instant, non-animated theme switch when the visitor prefers reduced motion (BR-5). */
.theme-red,
.theme-purple {
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .theme-red,
  .theme-purple {
    transition: none;
  }
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

.caret {
  display: inline-block;
  width: 9px;
  height: 1.2em;
  background: var(--color-accent);
  animation: caret-blink 1.1s steps(1) infinite;
  vertical-align: text-bottom;
}

@media (prefers-reduced-motion: reduce) {
  .caret {
    animation: none;
  }
}