@import 'tailwindcss';

/*
 * PintRush design tokens.
 * Dark by design: there is no light theme. Every surface/text pairing below was checked for
 * WCAG AA (text >= 4.5:1, UI boundaries >= 3:1). Brand colours use unsuffixed names
 * (`bg-violet`, `text-lime`, …) so they never collide with Tailwind's numbered palette.
 * `static` keeps every variable on :root so inline SVG, CSS modules and the game UIs can use
 * `var(--color-*)` even when no utility references the token yet.
 */
@theme static {
  /* Surfaces (navy) */
  --color-night: #070b1f;
  --color-surface: #0d1433;
  --color-raised: #151e4a;
  --color-raised-hover: #1b2659;
  --color-line: #23306b;
  /* Form-field and control borders: >= 3:1 against surface. */
  --color-line-strong: #56679f;

  /* Text */
  --color-fg: #f2f4ff;
  --color-muted: #a9b1d6;
  --color-subtle: #8891be;

  /* Electric violet — primary. Plain `violet` is for fills/glows; `violet-soft` for text on navy;
     `violet-strong`/`violet-deep` carry white text (>= 5.3:1). */
  --color-violet: #7c5cff;
  --color-violet-soft: #a996ff;
  --color-violet-strong: #6a4bf5;
  --color-violet-deep: #4b2fd6;

  /* Cyan — secondary / focus / timers */
  --color-cyan: #22d3ee;
  --color-cyan-soft: #8beaf7;
  --color-cyan-deep: #0e7490;

  /* Celebration accents (use dark `on-bright` text on these fills) */
  --color-amber: #ffb020;
  --color-amber-soft: #ffd27a;
  --color-lime: #b6f23a;
  --color-lime-soft: #d6f98f;

  /* Wrong / alert */
  --color-danger: #ff4d6d;
  --color-danger-soft: #ff8aa0;

  --color-on-bright: #070b1f;

  /* Radii */
  --radius-tile: 0.875rem;
  --radius-card: 1.5rem;
  --radius-screen: 1.75rem;

  /* Depth + neon glows */
  --shadow-card: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 24px 48px -24px rgb(0 0 0 / 0.7);
  --shadow-lift: inset 0 1px 0 0 rgb(255 255 255 / 0.08), 0 30px 60px -20px rgb(3 6 20 / 0.9);
  --shadow-glow-violet: 0 0 0 1px rgb(124 92 255 / 0.55), 0 10px 40px -8px rgb(124 92 255 / 0.6);
  --shadow-glow-cyan: 0 0 0 1px rgb(34 211 238 / 0.5), 0 10px 40px -8px rgb(34 211 238 / 0.5);
  --shadow-glow-amber: 0 0 0 1px rgb(255 176 32 / 0.55), 0 10px 40px -8px rgb(255 176 32 / 0.55);
  --shadow-glow-lime: 0 0 0 1px rgb(182 242 58 / 0.55), 0 10px 40px -8px rgb(182 242 58 / 0.5);
  --shadow-glow-danger: 0 0 0 1px rgb(255 77 109 / 0.55), 0 10px 40px -8px rgb(255 77 109 / 0.5);

  /* Fluid display type (Unbounded). Body copy uses Tailwind's default text-* scale. */
  --text-hero: clamp(2.5rem, 1.1rem + 5.6vw, 5.75rem);
  --text-hero--line-height: 0.98;
  --text-hero--letter-spacing: -0.035em;
  --text-display: clamp(2.125rem, 1.25rem + 3.2vw, 3.75rem);
  --text-display--line-height: 1.04;
  --text-display--letter-spacing: -0.03em;
  --text-title: clamp(1.75rem, 1.2rem + 1.9vw, 2.625rem);
  --text-title--line-height: 1.1;
  --text-title--letter-spacing: -0.025em;

  /* Layout */
  --container-page: 76rem;
}

/* Fonts are injected by next/font as CSS variables on <html> (see app/layout.tsx). */
@theme inline {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-unbounded), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}

/* Motion tokens. Keyframes are emitted only when an `animate-*` utility uses them. */
@theme {
  --animate-glow-pulse: glow-pulse 2.8s ease-in-out infinite;
  --animate-float: float 7s ease-in-out infinite;
  --animate-rise: rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  --animate-tile-pop: tile-pop 460ms cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
  --animate-shake: shake 420ms ease-in-out both;
  --animate-score-bump: score-bump 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  --animate-streak: streak 2.8s linear infinite;
  --animate-marquee: marquee 40s linear infinite;
  --animate-blink: blink 1.6s steps(2, start) infinite;

  @keyframes glow-pulse {
    0%,
    100% {
      opacity: 0.55;
      filter: saturate(1);
    }
    50% {
      opacity: 1;
      filter: saturate(1.35);
    }
  }
  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes tile-pop {
    0% {
      transform: scale(0.82);
      filter: brightness(1.8);
    }
    60% {
      transform: scale(1.08);
    }
    100% {
      transform: scale(1);
      filter: none;
    }
  }
  @keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }
    20%,
    60% {
      transform: translateX(-6px);
    }
    40%,
    80% {
      transform: translateX(6px);
    }
  }
  @keyframes score-bump {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.18);
      color: var(--color-amber);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes streak {
    from {
      transform: translateX(-120%) skewX(-24deg);
    }
    to {
      transform: translateX(320%) skewX(-24deg);
    }
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  @keyframes blink {
    to {
      visibility: hidden;
    }
  }
}

@layer base {
  html {
    color-scheme: dark;
    background-color: var(--color-night);
    color: var(--color-fg);
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5.5rem; /* keeps in-page anchors clear of the sticky header */
  }

  body {
    min-height: 100dvh;
    background-color: var(--color-night);
    color: var(--color-fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background-color: rgb(124 92 255 / 0.5);
    color: #fff;
  }

  /* One high-visibility focus ring everywhere (cyan reads on every navy surface and on violet). */
  :focus-visible {
    outline: 3px solid var(--color-cyan);
    outline-offset: 3px;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  p,
  li,
  dd {
    text-wrap: pretty;
  }

  summary {
    cursor: pointer;
  }
  summary::-webkit-details-marker {
    display: none;
  }

  /* Belt and braces: components gate their own motion with `motion-safe:`; this catches the rest. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ───────────── Utilities shared by marketing and game UIs ───────────── */

@utility container-page {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: 1rem;
  @media (width >= 40rem) {
    padding-inline: 1.5rem;
  }
  @media (width >= 64rem) {
    padding-inline: 2rem;
  }
}

/* Scores, timers, ranks: digits never shift width as they change. */
@utility num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

@utility text-gradient-brand {
  background-image: linear-gradient(100deg, var(--color-violet-soft) 0%, var(--color-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  @media (forced-colors: active) {
    color: CanvasText;
    background: none;
  }
}

@utility text-gradient-gold {
  background-image: linear-gradient(100deg, var(--color-amber-soft) 0%, var(--color-amber) 55%, var(--color-lime) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  @media (forced-colors: active) {
    color: CanvasText;
    background: none;
  }
}

/* Faint scoreboard grid for section backdrops. */
@utility bg-grid {
  background-image:
    linear-gradient(to right, rgb(35 48 107 / 0.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(35 48 107 / 0.35) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Diagonal "rush" streaks. */
@utility bg-streaks {
  background-image: repeating-linear-gradient(
    -62deg,
    transparent 0 22px,
    rgb(124 92 255 / 0.07) 22px 24px,
    transparent 24px 58px,
    rgb(34 211 238 / 0.05) 58px 59px
  );
}

/* Frosted navy panel for sticky chrome and overlays. */
@utility glass {
  background-color: rgb(7 11 31 / 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

/* Fade an element's edges (used by the category ticker). */
@utility mask-fade-x {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}