@import "tailwindcss";
@import "@fontsource/chakra-petch/latin-500.css";
@import "@fontsource/chakra-petch/latin-600.css";
@import "@fontsource/chakra-petch/latin-700.css";
@import "@fontsource/barlow/latin-400.css";
@import "@fontsource/barlow/latin-500.css";
@import "@fontsource/barlow/latin-600.css";

/* "Freight terminal HUD" theme (CR-005, decisions 0.5.47–0.5.48). */
@theme {
  --font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Chakra Petch", "Barlow", ui-sans-serif, system-ui, sans-serif;

  /* Surfaces, darkest first. */
  --color-space-950: #03050d;
  --color-space-900: #080d1d;
  --color-space-850: #0c132a;
  --color-space-800: #111a36;
  --color-space-700: #1a2548;
  --color-space-600: #26345f;
  --color-space-500: #3a4a7c;

  /* Text. */
  --color-ink-50: #f2f5ff;
  --color-ink-200: #c9d3ef;
  --color-ink-300: #a3afd3;
  --color-ink-400: #7e8bb3;
  --color-ink-500: #5c688f;

  --shadow-glow-amber: 0 0 0 1px rgb(251 191 36 / 0.45), 0 0 22px -4px rgb(251 191 36 / 0.6);
  --shadow-glow-cyan: 0 0 0 1px rgb(34 211 238 / 0.4), 0 0 22px -4px rgb(34 211 238 / 0.55);
  --shadow-glow-emerald: 0 0 0 1px rgb(52 211 153 / 0.4), 0 0 22px -4px rgb(52 211 153 / 0.55);
  --shadow-panel: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 12px 32px -12px rgb(0 0 0 / 0.8);

  --animate-rise: rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  --animate-glow: glow 2.4s ease-in-out infinite;
  --animate-sheet: sheet 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  --animate-slide: slide 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes glow {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.55;
    }
  }
  @keyframes slide {
    from {
      opacity: 0;
      transform: translateX(32px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes sheet {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@layer base {
  html {
    color-scheme: dark;
  }
  body {
    background-color: var(--color-space-950);
    color: var(--color-ink-50);
    font-family: var(--font-sans);
    -webkit-tap-highlight-color: transparent;
  }
  /* Every screen sits in space: the map background, dimmed (decision 0.5.47). */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgb(56 189 248 / 0.1), transparent 70%),
      linear-gradient(180deg, rgb(3 5 13 / 0.5), rgb(3 5 13 / 0.82)),
      url("/assets/map-gen/bg.webp") center / cover no-repeat,
      var(--color-space-950);
  }
  :focus-visible {
    outline: 2px solid var(--color-amber-400);
    outline-offset: 2px;
  }
}

/*
 * Motion is decoration only: switch it off when asked. The app sets
 * data-reduced-motion on <html> from the player's setting (CR-011); without
 * an override it follows the device.
 */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduced-motion="false"]) *,
  :root:not([data-reduced-motion="false"]) *::before,
  :root:not([data-reduced-motion="false"]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
:root[data-reduced-motion="true"] *,
:root[data-reduced-motion="true"] *::before,
:root[data-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}