@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;

  /* Accent scales in the role hues: amber action, blue flight, mint earned, coral problem. */
  --color-amber-50: #fff8e8;
  --color-amber-100: #fff0d1;
  --color-amber-200: #ffe2a8;
  --color-amber-300: #ffd27a;
  --color-amber-400: #ffc04d;
  --color-amber-500: #f5a623;
  --color-amber-600: #c97f10;
  --color-amber-700: #9c620f;
  --color-amber-800: #7a4d10;
  --color-amber-900: #5c3b10;
  --color-amber-950: #2e1c04;
  --color-cyan-50: #eef6ff;
  --color-cyan-100: #dcedff;
  --color-cyan-200: #bddcff;
  --color-cyan-300: #93c9ff;
  --color-cyan-400: #68aef5;
  --color-cyan-500: #4690e0;
  --color-cyan-600: #2f74c2;
  --color-cyan-700: #2a5c98;
  --color-cyan-800: #244a78;
  --color-cyan-900: #1f3d61;
  --color-cyan-950: #122540;
  --color-sky-50: #eef6ff;
  --color-sky-100: #dcedff;
  --color-sky-200: #bddcff;
  --color-sky-300: #93c9ff;
  --color-sky-400: #68aef5;
  --color-sky-500: #4690e0;
  --color-sky-600: #2f74c2;
  --color-sky-700: #2a5c98;
  --color-sky-800: #244a78;
  --color-sky-900: #1f3d61;
  --color-sky-950: #122540;
  --color-emerald-50: #eafbf3;
  --color-emerald-100: #d0f6e4;
  --color-emerald-200: #aaf0cf;
  --color-emerald-300: #84e3b5;
  --color-emerald-400: #5ed09a;
  --color-emerald-500: #3db680;
  --color-emerald-600: #2c9367;
  --color-emerald-700: #267553;
  --color-emerald-800: #215d44;
  --color-emerald-900: #1c4c39;
  --color-emerald-950: #0e2c21;
  --color-rose-50: #fff2ef;
  --color-rose-100: #ffe2db;
  --color-rose-200: #ffc8bb;
  --color-rose-300: #ffa896;
  --color-rose-400: #ff8d7a;
  --color-rose-500: #f56f5a;
  --color-rose-600: #dc5340;
  --color-rose-700: #b54232;
  --color-rose-800: #8f372b;
  --color-rose-900: #732f26;
  --color-rose-950: #3f1610;

  /* Selection rings, without the old neon blur. */
  --shadow-glow-amber: 0 0 0 1px rgb(255 192 77 / 0.55);
  --shadow-glow-cyan: 0 0 0 1px rgb(147 201 255 / 0.5);
  --shadow-glow-emerald: 0 0 0 1px rgb(132 227 181 / 0.5);
  --shadow-panel: 0 10px 30px -14px rgb(0 0 0 / 0.7);

  --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;
}