/* Vidia — glass material ladder (the Glass Language, 2026-07).
   One material system: the domain's cover art is the light source (E0);
   everything above it is glass, and elevation = how much light passes through.
   Tiers: E1 frost (resting rows/cards) · E2 glass (floating chrome, heroes)
   · E3 vault (modal sheets — near-solid so copy stays legible).

   Rules:
   - Reading sits on solid paper (--surface-card) — glass frames learning,
     never body text.
   - One cover per screen: Path -> Atlas -> Module share the domain's light.
   - Never glass on glass — a frost row inside a glass card goes solid.
   - Verdict states are solid tints + filled badges: glass carries the
     material, solid carries the verdict.

   React Native mapping: E1 is TINT-ONLY (bg fill + hairline, no blur — free
   in lists). E2/E3 are real BlurViews (expo-blur intensity 24 / 42), at most
   ~4 per screen. Progressive chrome blur = stacked low-intensity BlurViews. */

:root, [data-theme="light"] {
  /* ---- Fill per tier ---- */
  --glass-frost-bg: rgba(252, 251, 249, 0.55);   /* E1 */
  --glass-bg: rgba(252, 251, 249, 0.62);         /* E2 */
  --glass-vault-bg: rgba(252, 251, 249, 0.80);   /* E3 */

  /* ---- Edge & inner light ---- */
  --glass-frost-border: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.80);
  --glass-highlight: rgba(255, 255, 255, 0.95);  /* inset 0 1px 0 — light catching the top edge */

  /* ---- Blur & saturation per tier (web: backdrop-filter) ---- */
  --glass-frost-blur: 14px;
  --glass-frost-sat: 1.4; /* @kind other */
  --glass-blur: 22px;
  --glass-sat: 1.7; /* @kind other */
  --glass-vault-blur: 34px;
  --glass-vault-sat: 1.8; /* @kind other */

  /* ---- Elevation shadows per tier ---- */
  --shadow-frost: 0 4px 14px rgba(0, 0, 0, 0.10);
  --shadow-glass: 0 10px 30px rgba(0, 0, 0, 0.24);
  --shadow-vault: 0 -14px 50px rgba(0, 0, 0, 0.34);

  /* ---- E0 ambient: scrims that keep white chrome legible over ANY cover ---- */
  /* canopy: inner-screen header zone (Atlas / Area / Module) */
  --scrim-canopy: linear-gradient(to bottom, rgba(0,0,0,0.46), rgba(0,0,0,0.14) 48%, transparent 64%); /* @kind other */
  /* chrome: lesson top chrome over content scrolling beneath */
  --scrim-chrome: linear-gradient(to bottom, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.32) 35%, rgba(0,0,0,0.12) 72%, transparent 100%); /* @kind other */
  /* fade: every E0 dissolves into paper before content begins @kind other */
  --fade-to-paper: linear-gradient(to top, var(--paper-1) 8%, rgba(0,0,0,0) 82%);

  /* ---- Ambient blobs (You / Composer — screens with no single domain):
     an aurora mixed from the cover-palette family, blurred ~48px ---- */
  --ambient-a: #8FD0CF;  /* soft teal */
  --ambient-b: #D9C39A;  /* warm amber */
  --ambient-c: #9BA8C9;  /* periwinkle */
}

[data-theme="dark"] {
  --glass-frost-bg: rgba(34, 33, 31, 0.42);
  --glass-bg: rgba(26, 26, 24, 0.34);
  --glass-vault-bg: rgba(58, 56, 52, 0.60);

  --glass-frost-border: rgba(242, 240, 236, 0.12);
  --glass-border: rgba(242, 240, 236, 0.20);
  --glass-highlight: rgba(242, 240, 236, 0.22);  /* in dark, the light rim carries the lift */

  --shadow-frost: 0 4px 14px rgba(0, 0, 0, 0.22);
  --shadow-glass: 0 10px 30px rgba(0, 0, 0, 0.38);
  --shadow-vault: 0 -14px 50px rgba(0, 0, 0, 0.52);

  --ambient-a: #2E4A49;
  --ambient-b: #45392A;
  --ambient-c: #333A4D;
}