/* ─────────────────────────────────────────────────────────────────────────────
   SQL Crush — web theme.
   A direct port of theme/Color.kt. Every token below maps 1:1 to a Kotlin val,
   so a colour change in the Android app is a one-line change here too.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* BRAND — primary actions / active states only */
  --brand-purple: #865DFF;

  /* FUNCTIONAL */
  --success-green: #00C896;
  --amber-warm: #FFAB00;
  --neon-lime: #CDFF00;   /* AuthScreen-local in Kotlin; global here (log-in CTA) */

  /* LINK TEXT ONLY — never borders or backgrounds */
  --cyan-link: #00D2FC;

  /* NEUTRALS */
  --cosmic-dark-bg: #070510;
  --surface-dark: #100D20;
  --surface-card: #0F0C1E;   /* auth card, slightly lifted off --surface-dark */
  --neutral-border: #1E1A3A;
  --text-white: #FFFFFF;
  --text-gray: #9390AB;

  /* Compose translucent fills, ARGB -> rgba */
  --field-bg: rgba(255, 255, 255, 0.02);      /* 0x05FFFFFF unfocused */
  --field-bg-focus: rgba(255, 255, 255, 0.055); /* 0x0EFFFFFF focused */
  --ghost-bg: rgba(255, 255, 255, 0.039);      /* 0x0AFFFFFF guest button */

  /* Compose's FastOutSlowInEasing */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* The app is a phone app. On desktop we keep a phone-width column so the
     layout reads as the same product rather than a stretched-out website. */
  --app-width: 440px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is honoured by a UA rule at specificity (0,1,0), so any author
   rule that sets `display` on the same element silently defeats it — `.dialog-scrim
   { display: grid }` left the victory and tutorial dialogs permanently on screen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--cosmic-dark-bg);
}

body {
  font-family: Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text-white);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ── App shell ─────────────────────────────────────────────────────────────── */

#app {
  position: relative;
  width: 100%;
  max-width: var(--app-width);
  margin: 0 auto;
  min-height: 100dvh;
  overflow-x: hidden;
  /* The hairlines echo a device edge on desktop; invisible on phones. */
  border-inline: 1px solid var(--neutral-border);
}

@media (max-width: 460px) {
  #app { border-inline: none; }
}

/* Every screen is absolutely stacked so enter/exit animations can overlap,
   the same way NavDisplay cross-fades two destinations mid-transition. */
.screen {
  position: absolute;
  inset: 0;
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--cosmic-dark-bg);
}

.screen.settled { position: relative; }

/* Navigation.kt: slideInHorizontally + fadeIn / slideOutHorizontally + fadeOut,
   tween(300, FastOutSlowInEasing). Forward pushes right-to-left; back reverses. */
@keyframes nav-push-in  { from { transform: translateX(100%);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes nav-push-out { from { transform: translateX(0);     opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@keyframes nav-pop-in   { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes nav-pop-out  { from { transform: translateX(0);     opacity: 1; } to { transform: translateX(100%);  opacity: 0; } }

.screen.push-in  { animation: nav-push-in  300ms var(--ease-standard) both; }
.screen.push-out { animation: nav-push-out 300ms var(--ease-standard) both; }
.screen.pop-in   { animation: nav-pop-in   300ms var(--ease-standard) both; }
.screen.pop-out  { animation: nav-pop-out  300ms var(--ease-standard) both; }

@media (prefers-reduced-motion: reduce) {
  .screen.push-in, .screen.push-out, .screen.pop-in, .screen.pop-out {
    animation-duration: 1ms;
  }
}

/* ── Compose primitives, as utility classes ────────────────────────────────── */

.col { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; align-items: center; }
.center { align-items: center; justify-content: center; }
.grow { flex: 1 1 auto; }
.spacer { flex: 1 1 auto; }

.card {
  background: var(--surface-dark);
  border: 1px solid var(--neutral-border);
  border-radius: 20px;
}

.text-gray { color: var(--text-gray); }
.text-lime { color: var(--neon-lime); }
.text-purple { color: var(--brand-purple); }
.text-green { color: var(--success-green); }
.text-amber { color: var(--amber-warm); }
.text-cyan { color: var(--cyan-link); }

/* saasClick: Compose's press animation is a quick scale-down with a soft
   settle. A 90ms press-in / 200ms release matches it closely enough that the
   two products feel like the same button. */
.tap {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms var(--ease-standard), filter 200ms var(--ease-standard);
}
.tap:active { transform: scale(0.965); filter: brightness(1.08); transition-duration: 90ms; }
.tap:focus-visible { outline: 2px solid var(--brand-purple); outline-offset: 3px; }

/* Element-level, deliberately: a class selector in screens.css must be able to paint a
   button without fighting specificity. `button.tap` here would outrank `.auth-submit`. */
button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ── Shared status bar inset ───────────────────────────────────────────────── */
.status-bar-pad { padding-top: max(18px, env(safe-area-inset-top)); }