/* app-aozora 青空トンマナ層 — 日本の田舎の青空とみどり.
 *
 * Loaded last (tailwind.css → liquid-glass.css → app.css → aozora.css):
 *
 * 1. Flips the compiled gv2 palette from dark to the aozora light scheme.
 *    The committed Tailwind build compiles every gv2 utility to
 *    `var(--color-gv2-*)`, so overriding the variables re-themes the whole
 *    app without a Tailwind rebuild.
 * 2. Adapts liquid-glass material surfaces (kotoba-lang/liquid-glass-ui,
 *    generated into css/liquid-glass.css by scripts/gen-liquid-glass-css.bb)
 *    to the app shell layout — the library owns the material, the app owns
 *    geometry (position/padding/size of header, tab dock, content panel).
 */

:root {
  /* gv2 palette → 青空 light scheme */
  --color-gv2-bg-base: #e3f1fa;                 /* pale sky */
  --color-gv2-bg-card: rgba(255, 255, 255, 0.62); /* cloud-white card */
  --color-gv2-border: rgba(23, 50, 59, 0.16);   /* soft deep-ink border */
  --color-gv2-text-primary: #17323b;            /* deep ink (= liquid-glass ink) */
  --color-gv2-text-muted: #4e6d79;
  /* header / tab-bar inline fallback var (was #0a0a0a) */
  --gv2-bg-primary: rgba(255, 255, 255, 0.55);

  /* 青空 scene palette — canvas scene + static fallbacks share these */
  --aozora-sky-zenith:  #3a89cf;
  --aozora-sky-mid:     #7ab9e6;
  --aozora-sky-horizon: #d9edf9;
  --aozora-haze:        #eaf3e2;
  --aozora-mount-far:   #5e8f63;
  --aozora-mount-near:  #3e7238;
  --aozora-field:       #7db457;
  --aozora-midori:      #58cc02;
}

/* The app is a daylight 青空 scene in both OS schemes: pin the glass material
   to its light values so prefers-color-scheme: dark doesn't turn the panels
   into dark glass under the (always light) gv2 ink. */
@media (prefers-color-scheme: dark) {
  :root {
    --liquid-glass-surface-clear-tint: rgba(255, 255, 255, 0.10);
    --liquid-glass-surface-clear-border: rgba(255, 255, 255, 0.32);
    --liquid-glass-surface-regular-tint: rgba(255, 255, 255, 0.28);
    --liquid-glass-surface-regular-border: rgba(255, 255, 255, 0.50);
    --liquid-glass-surface-thick-tint: rgba(255, 255, 255, 0.44);
    --liquid-glass-surface-thick-border: rgba(255, 255, 255, 0.60);
    --liquid-glass-specular-highlight-opacity: 0.55;
    --liquid-glass-specular-rim-top-opacity: 0.9;
    --liquid-glass-specular-rim-bottom-opacity: 0.05;
    --liquid-glass-specular-pointer-opacity: 0.5;
    --liquid-glass-ink-default: #17323b;
    --liquid-glass-ink-shadow: 0 1px 2px rgba(255, 255, 255, .45);
  }
}

/* Full-page 青空 gradient behind everything — the ambient canvas paints the
   live scene over it; this is also the pre-paint / reduced-motion base. */
body {
  background: linear-gradient(180deg,
    var(--aozora-sky-zenith) 0%,
    var(--aozora-sky-mid) 34%,
    var(--aozora-sky-horizon) 56%,
    var(--aozora-haze) 64%,
    var(--aozora-mount-far) 78%,
    var(--aozora-field) 100%);
  background-attachment: fixed;
}

/* ---- liquid-glass shell adaptations ------------------------------------ */

/* Sticky glass header (liquid-glass__nav-bar material, app geometry). */
.aozora-app-header {
  position: sticky;
  padding: 0;
}

/* Floating glass tab dock (liquid-glass__toolbar material). */
.aozora-tab-dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 520px;
  margin: 0 auto;
  z-index: 50;
  border-radius: var(--liquid-glass-radius-pill);
  padding: 4px 6px;
}
.aozora-tab-dock button {
  border-radius: var(--liquid-glass-radius-pill);
}
.aozora-tab-active {
  color: #0d84c9; /* deep sky — active tab over white glass */
}

/* Content column: ONE glass sheet over the scene (a single backdrop-filter
   region keeps the feed readable and bounds the blur cost). overflow stays
   visible so position:sticky inside the feed keeps working. */
.aozora-content-panel {
  max-width: 640px;
  margin: 10px auto 8px;
  padding: 0;
  overflow: visible;
  min-height: calc(100vh - 140px);
}

/* Modal / composer sheets reuse the thick glass panel minus its padding. */
.aozora-glass-modal {
  padding: 0;
}

/* Splash: 青空 morning gradient instead of the old #0a0a0a. */
.aozora-splash {
  background: linear-gradient(180deg,
    var(--aozora-sky-zenith) 0%,
    var(--aozora-sky-mid) 40%,
    var(--aozora-sky-horizon) 66%,
    var(--aozora-field) 100%);
}