@import "tailwindcss";
@import "@fontsource/michroma/latin-400.css";
@import "@fontsource/instrument-sans/latin-400.css";
@import "@fontsource/instrument-sans/latin-500.css";
@import "@fontsource/instrument-sans/latin-600.css";
@import "@fontsource/instrument-sans/latin-700.css";

/* "Deep Field" theme (CR-029, decision 0.5.165). */
@theme {
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  /* The wordmark and screen titles only. */
  --font-title: "Michroma", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  /* Emphasised labels and numbers, used across the screens. */
  --font-display: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  /* Surfaces, darkest first. */
  --color-space-950: #050919;
  --color-space-900: #0a1228;
  --color-space-850: #0d152e;
  --color-space-800: #121c3a;
  --color-space-700: #1c284e;
  --color-space-600: #2a3863;
  --color-space-500: #3f4f81;

  /* Text. Every step stays readable on the glass, whatever is behind it. */
  --color-ink-50: #f0f3ff;
  --color-ink-100: #e2e7f7;
  --color-ink-200: #d3daef;
  --color-ink-300: #b9c4e0;
  --color-ink-400: #abb6d4;
  --color-ink-500: #a0accd;

  /* Roles (decision 0.5.165). */
  --color-glass: rgb(13 21 46 / 0.82);
  --color-glass-line: rgb(170 195 255 / 0.18);
  --color-action: #ffc04d; /* The main action, and the player's own ship. */
  --color-on-action: #241700;
  --color-flight: #93c9ff; /* Other ships' flights. */
  --color-earned: #84e3b5; /* Money earned. */
  --color-problem: #ff8d7a; /* Something needs attention. */
  --color-on-problem: #2a0a05;

  --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;
  }
  :focus-visible {
    outline: 2px solid var(--color-action);
    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;
}