@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@200;300;400;500&family=Noto+Serif+SC:wght@200;300;400;500&family=JetBrains+Mono:wght@200;300;400;500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ============================================================
   River — 声影演替
   Color, Type, Motion & Surface Tokens
   ============================================================

   River is a deeply dark, water-themed Chinese-language ambient
   installation. The palette is essentially black with a single
   shimmering teal-cyan accent, and a thin family of cooled-down
   blue-greys layered between. Text is always low-contrast and
   wide-tracked. Industrial UI signals (solid buttons, drop shadows,
   bright accents, emoji) are deliberately suppressed.

   ------------------------------------------------------------ */

:root {
  /* ---------- COLOR — Atmosphere ----------------------------
     Dark, water-themed neutrals. These come straight out of
     web/src/styles/global.css and the dark map SVG.            */

  --color-void:        #0a0a0f;   /* root canvas — pre-dawn black            */
  --color-deep:        #0d1117;   /* deeper surface — beneath the water      */
  --color-water:       #1a2332;   /* still water — slate blue                */
  --color-silt:        #06080d;   /* map background — sediment black         */
  --color-channel:     #0a2530;   /* river-bed shadow                        */

  /* ---------- COLOR — Currents ------------------------------
     Tonal blue-greens layered into the river map. Used as
     glow/stroke colors and never as solid fills on UI.         */

  --color-river-deep:  #173947;   /* huangpu sub-bass zone                   */
  --color-river-mid:   #236f8f;   /* huangpu main stroke                     */
  --color-river-pale:  #2cc8d0;   /* core river path                         */
  --color-river-mist:  #76c9c8;   /* path scaffolding                        */

  /* ---------- COLOR — Shimmer (primary accent) --------------
     The water-light accent. Used only for live audio/water
     signals: ring pulses, sound nodes, active rec progress,
     confluence/listener glow on the map. Never a static fill. */

  --color-shimmer:        #4fd1c5;
  --color-shimmer-pale:   #b8fff2;
  --color-shimmer-bright: #d9fff7;

  /* ---------- COLOR — Amber (secondary signal) ----------------
     A dimmed sediment amber — the warmth of low light catching
     riverbed mud. Reserved for *human-presence* signals: a live
     recording in progress, a curator/operator-side surface, an
     uploaded sound about to be physically deleted, a consent
     prompt. NEVER appears simultaneously *bright* with shimmer;
     the two accents are designed to alternate, not co-star.
     Keep usage rare — a lantern on the river, not a flag.       */

  --color-amber:          #b8915c;
  --color-amber-pale:     #d4ad7a;   /* halos, hover lift               */
  --color-amber-bright:   #e6c79a;   /* spot accent on a glyph          */
  --color-amber-deep:     #6f5238;   /* deep state / pressed            */
  --color-amber-haze:     rgba(184, 145, 92, 0.10);  /* radial fill    */

  /* ---------- COLOR — Foreground text -----------------------
     Always low-contrast. The brightest tier (--fg) is reserved
     for primary copy on the void; everything else is rgba white
     at decreasing opacity. Never use pure #ffffff.             */

  --fg:        #e0e0e0;                          /* primary copy            */
  --fg-dim:    rgba(255, 255, 255, 0.60);         /* secondary copy          */
  --fg-muted:  rgba(255, 255, 255, 0.40);         /* tertiary, hints         */
  --fg-faint:  rgba(255, 255, 255, 0.20);         /* legal, watermark        */
  --fg-ghost:  rgba(255, 255, 255, 0.03);         /* not text — surface tint */

  /* ---------- COLOR — Borders & shadows ---------------------
     Borders are hairline and ultra-low-opacity white. The site
     has effectively no drop shadows; instead, surfaces glow
     outward via radial gradients and SVG feGaussianBlur.       */

  --line:        rgba(255, 255, 255, 0.08);       /* default hairline        */
  --line-hover:  rgba(255, 255, 255, 0.20);       /* hover hairline          */
  --line-active: rgba(79, 209, 197, 0.30);        /* alive / recording       */

  --glow-shimmer-soft:  0 0 20px rgba(79, 209, 197, 0.02);
  --glow-shimmer-mid:   0 0 40px rgba(79, 209, 197, 0.06);
  --glow-shimmer-loud:  0 0 60px rgba(79, 209, 197, 0.14);

  /* ---------- TYPE — Families -------------------------------
     Body / UI copy is set in Noto Sans SC (loaded as a webfont),
     a modern open-source CJK sans close to PingFang, with the
     system sans stack as fallback. Monospace is reserved for the
     debug tuning console, which sets a strong "instrument" vibe. */

  --font-body: "Noto Sans SC", -apple-system, BlinkMacSystemFont,
               "Hiragino Sans GB", "Microsoft YaHei",
               "Segoe UI", sans-serif;

  /* Display — a refined high-contrast Song serif (思源宋体). This is
     the voice of the poetic Chinese: titles, ledes, the river's own
     sentences. Light weights only — it reads as engraved, literary,
     and pairs against the wide-tracked sans labels for contrast.   */
  --font-display: "Noto Serif SC", "Songti SC", "STSong",
                  "Source Han Serif SC", "Times New Roman", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco,
               "JetBrains Mono", Consolas, monospace;

  /* ---------- TYPE — Scale ----------------------------------
     The product runs SMALL. The biggest character on most
     screens is the privacy heading at 1rem (~16px); body sits
     at 0.7–0.8rem with tracking ≥ 0.15em. This is intentional —
     readers should lean in.                                    */

  --size-xs:   0.55rem;   /*  ~8.8px — wordmark watermark           */
  --size-2xs:  0.60rem;   /*  ~9.6px — immersion hint               */
  --size-sm:   0.65rem;   /* ~10.4px — captions, counter            */
  --size-md:   0.70rem;   /* ~11.2px — labels, hints                */
  --size-lg:   0.75rem;   /*   ~12px — primary CTA text             */
  --size-xl:   0.80rem;   /* ~12.8px — body copy                    */
  --size-2xl:  0.875rem;  /*   ~14px — entry-gate prompt            */
  --size-3xl:  1.00rem;   /*   ~16px — heading (largest)            */

  /* Weights — only light/regular. River has no bold.           */
  --weight-light:   300;
  --weight-normal:  400;

  /* Tracking — wide letter-spacing IS the type system. Never
     set tracking below 0.10em on UI labels.                    */
  --track-loose:    0.10em;
  --track-wider:    0.15em;
  --track-widest:   0.20em;
  --track-extreme:  0.25em;

  /* Leading — body copy is meditative, almost double-leaded.   */
  --leading-tight:  1.4;
  --leading-body:   2.0;

  /* ---------- SPACE -----------------------------------------
     Generous, square spacing. 4px grid at the small end,
     1rem (16px) units thereafter.                              */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.8rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-12: 4.5rem;

  /* ---------- RADII -----------------------------------------
     Either pure circles (50%) or a 2px sharp-edged rectangle.
     No 8/12/16-px rounded card vibe — this is not that kind
     of product.                                                */

  --radius-sharp:   2px;
  --radius-pill:    999px;
  --radius-circle:  50%;

  /* ---------- MOTION ----------------------------------------
     Everything is slow. The signature curve is a long
     cubic-bezier(0.16, 1, 0.3, 1) over 2s. Breathing loops run
     4–7s. Reduced-motion users get a hard 0.01ms.              */

  --ease-tide:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-current:   cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */

  --dur-instant:    0.3s; /* @kind other */
  --dur-quick:      0.6s; /* @kind other */
  --dur-slow:       2s; /* @kind other */
  --dur-breathe:    5s; /* @kind other */
  --dur-ring:       4s; /* @kind other */

  --transition-slow: var(--dur-slow) var(--ease-tide);

  /* iOS safe areas (the product is mobile-first) */
  --safe-area-top:    env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   You can drop these on plain HTML to inherit the River vibe.
   ============================================================ */

html, body {
  background: var(--color-void);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-size: var(--size-3xl);
  font-weight: var(--weight-light);
  color: var(--fg);
  letter-spacing: var(--track-wider);
  margin: 0;
}

h2, .h2 {
  font-size: var(--size-2xl);
  font-weight: var(--weight-light);
  color: var(--fg);
  letter-spacing: var(--track-widest);
  margin: 0;
}

h3, .h3 {
  font-size: var(--size-xl);
  font-weight: var(--weight-light);
  color: var(--fg-dim);
  letter-spacing: var(--track-widest);
  margin: 0;
}

p, .body {
  font-size: var(--size-xl);
  color: var(--fg-dim);
  line-height: var(--leading-body);
  letter-spacing: var(--track-loose);
  margin: 0;
}

.prompt {            /* the "触碰，进入场域" voice — wide & breathing */
  font-size: var(--size-2xl);
  color: var(--fg-muted);
  letter-spacing: var(--track-extreme);
}

.hint {              /* below-component micro labels                */
  font-size: var(--size-md);
  color: var(--fg-muted);
  letter-spacing: var(--track-wider);
}

.watermark {         /* tiny lower-corner identifier               */
  font-size: var(--size-xs);
  color: var(--fg-faint);
  letter-spacing: var(--track-loose);
  opacity: 0.4;
}

.caption {
  font-size: var(--size-sm);
  color: var(--fg-muted);
  letter-spacing: var(--track-wider);
}

code, .mono, .console {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  color: rgba(235, 250, 248, 0.92);
  letter-spacing: 0;
}

/* ---------- Keyframes — the four canonical loops ------------ */

@keyframes river-breathe {
  0%, 100% { opacity: 0.3; transform: scale(1);    }
  50%      { opacity: 0.6; transform: scale(1.02); }
}

@keyframes river-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes river-ring-pulse {
  0%, 100% {
    transform: scale(1);
    border-color: rgba(79, 209, 197, 0.10);
    box-shadow: 0 0 20px rgba(79, 209, 197, 0.02);
  }
  50% {
    transform: scale(1.08);
    border-color: rgba(79, 209, 197, 0.25);
    box-shadow: 0 0 40px rgba(79, 209, 197, 0.06);
  }
}

@keyframes river-node-breathe {
  0%, 100% { opacity: 0.32; transform: scale(0.88); }
  50%      { opacity: 0.85; transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}