/* MIC — Effects tokens: glass panels, protection scrims, shadows, textures.
   Glass = blurred Deep-Blue panel over navy/imagery; scrim protects text on photos. */

:root {
  /* ---- Glass panels ---- */
  --glass-bg:         rgba(13,59,102,0.38);   /* Deep Blue @ 38% */
  --glass-bg-strong:  rgba(13,59,102,0.62);
  --glass-bg-subtle:  rgba(252,251,248,0.06); /* whisper panel on ink */
  --glass-blur:       blur(18px); /* @kind other */
  --glass-blur-soft:  blur(10px); /* @kind other */
  --glass-border:     1px solid rgba(255,255,255,0.14); /* @kind other */
  --glass-radius:     16px;

  /* ---- Protection scrims (over photography) ---- */
  --scrim-bottom: linear-gradient(180deg, rgba(7,26,43,0) 30%, rgba(7,26,43,0.82) 100%); /* @kind other */
  --scrim-full:   rgba(7,26,43,0.55);

  /* ---- Shadow scale (soft, low-contrast — never glow) ---- */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.18);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.22);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.28);
  --shadow-lg:    0 20px 48px rgba(0,0,0,0.35);
  --shadow-hover: 0 12px 32px rgba(0,0,0,0.32);

  /* ---- Textures (support, never dominate) ---- */
  --grid-line:      rgba(255,255,255,0.03);
  --grid-size:      72px;
  --texture-grid:   linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}

/* Utility classes */
.mic-glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--glass-radius); }
.mic-glass--subtle { background: var(--glass-bg-subtle); backdrop-filter: var(--glass-blur-soft); -webkit-backdrop-filter: var(--glass-blur-soft); border: var(--glass-border); border-radius: var(--glass-radius); }
.mic-page-ink { background-color: var(--mic-midnight); background-image: var(--texture-grid); background-size: var(--grid-size) var(--grid-size); }