/* Agent Aqua — design tokens + base polish on top of the Ionic palette.
   App-level tokens (gradients, glass surfaces, glow, type scale) live here so
   components reference one vocabulary. Imported after variables.css. */

:root {
  /* Type — Fraunces (organic display) for headings/brand, Manrope for body,
     tabular Manrope for big readouts. Distinctive without being illegible. */
  --aqua-font-display: "Fraunces", "Manrope", Georgia, serif;
  --aqua-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --aqua-radius: 20px;
  --aqua-radius-sm: 14px;

  /* The dusk sky → warm horizon → dark ground gradient behind the hero scene. */
  --aqua-dusk: linear-gradient(
    180deg,
    #24395f 0%,
    #3f5680 22%,
    #7b7f9a 44%,
    #b88a7f 58%,
    #4a3236 72%,
    #16202c 88%,
    #0a121c 100%
  );

  /* Light-mode glass and text tokens (overridden for dark below). */
  --aqua-glass-bg: rgba(0, 0, 0, 0.04);
  --aqua-glass-bg-strong: rgba(0, 0, 0, 0.07);
  --aqua-glass-border: rgba(0, 0, 0, 0.1);
  --aqua-glass-blur: saturate(140%) blur(18px);

  --aqua-text-muted: rgba(10, 18, 28, 0.55);
  --aqua-text-faint: rgba(10, 18, 28, 0.35);

  /* Bottom tab-bar fade — matches the page ground so the bar dissolves into it.
     RGB triple so the gradient can vary alpha; switches with the dark palette. */
  --aqua-tabbar-fade-rgb: 244, 248, 252;

  /* Cyan water glow used by the flow line and active accents. */
  --aqua-glow: 0 0 18px rgba(45, 212, 255, 0.55);
  --aqua-glow-soft: 0 0 32px rgba(45, 212, 255, 0.28);

  --aqua-shadow-card: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --aqua-shadow-float: 0 24px 60px -20px rgba(0, 0, 0, 0.85);

  --aqua-flow: #38e0ff;

  /* ---- Hero scene palette (light = daytime; dark mode below = dusk) --------
     The ZoneScene SVG reads these via fill/stroke="var(--…)" so the whole
     illustration follows the theme switch with no JS. Foliage greens and trunk
     browns are intentionally NOT tokenised — they read correctly in daylight
     and at dusk alike. Light values here paint a bright midday garden. */
  --aqua-scene-sky: linear-gradient(
    180deg,
    #6fb1ea 0%,
    #93c6ed 22%,
    #bedcf0 44%,
    #dcecdc 60%,
    #cfe6c2 74%,
    #c2dcb0 100%
  );
  --aqua-scene-ground: #b3cf9b;
  --aqua-scene-ground-hi: #c7dcae;
  --aqua-scene-soil: #7a5a40;
  --aqua-scene-soil-rim: #9a7553;
  --aqua-scene-structure: #cdd8e4;
  --aqua-scene-structure-light: #aebccd;
  --aqua-scene-structure-dark: #8896a8;
  --aqua-scene-window: #bfe0f5;
  --aqua-scene-chip-bg: rgba(255, 255, 255, 0.78);
  --aqua-scene-chip-border: rgba(0, 0, 0, 0.12);
  --aqua-scene-label: #1a2733;
  --aqua-scene-line: rgba(20, 40, 60, 0.22);
  --aqua-scene-readout: #16202c;
  --aqua-scene-readout-dim: rgba(22, 32, 44, 0.62);
}

/* Dark-mode token overrides — frosted glass suitable for the twilight ink. */
:root.ion-palette-dark {
  --aqua-glass-bg: rgba(255, 255, 255, 0.05);
  --aqua-glass-bg-strong: rgba(255, 255, 255, 0.08);
  --aqua-glass-border: rgba(255, 255, 255, 0.1);

  --aqua-text-muted: rgba(234, 242, 248, 0.58);
  --aqua-text-faint: rgba(234, 242, 248, 0.38);

  --aqua-tabbar-fade-rgb: 10, 18, 28;

  /* Dusk scene palette — the original twilight look, now scoped to dark mode. */
  --aqua-scene-sky: var(--aqua-dusk);
  --aqua-scene-ground: #0c1722;
  --aqua-scene-ground-hi: #13202d;
  --aqua-scene-soil: #1a140f;
  --aqua-scene-soil-rim: #2c2218;
  --aqua-scene-structure: #1d2c3d;
  --aqua-scene-structure-light: #27394e;
  --aqua-scene-structure-dark: #0f1a26;
  --aqua-scene-window: #ffcf8f;
  --aqua-scene-chip-bg: rgba(8, 15, 23, 0.72);
  --aqua-scene-chip-border: rgba(255, 255, 255, 0.12);
  --aqua-scene-label: #eaf2f8;
  --aqua-scene-line: rgba(255, 255, 255, 0.16);
  --aqua-scene-readout: #f3f8fc;
  --aqua-scene-readout-dim: rgba(234, 242, 248, 0.62);
}

body {
  font-family: var(--aqua-font-body);
}

h1,
h2,
h3,
.aqua-display {
  font-family: var(--aqua-font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
}

/* Big numeric readouts: Manrope with tabular figures so digits don't jitter. */
.aqua-readout {
  font-family: var(--aqua-font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Soft, rounded, glassy surfaces. */
ion-card {
  border-radius: var(--aqua-radius);
  box-shadow: var(--aqua-shadow-card);
}

ion-button {
  --border-radius: 14px;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
}

/* Reusable glass panel — applied by className to non-Ionic containers. */
.aqua-glass {
  background: var(--aqua-glass-bg);
  border: 1px solid var(--aqua-glass-border);
  border-radius: var(--aqua-radius);
  backdrop-filter: var(--aqua-glass-blur);
  -webkit-backdrop-filter: var(--aqua-glass-blur);
  box-shadow: var(--aqua-shadow-card);
}

/* One orchestrated page-load reveal. Elements opt in with .aqua-rise and an
   inline --aqua-delay for staggering. The animation is gated behind an
   .aqua-ready ancestor (applied by usePageReveal on ionViewDidEnter) rather than
   running on mount: on first land an Ionic tab page is briefly hidden while its
   outlet sets up, and a mount-time animation can finish behind that veil — which
   leaves these elements stuck at opacity:0 until a tab switch repaints them.
   Respects reduced-motion. */
@keyframes aqua-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.aqua-rise {
  opacity: 0;
}

.aqua-ready .aqua-rise {
  animation: aqua-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--aqua-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .aqua-rise {
    animation: none;
    opacity: 1;
  }
}