/* ============================================================
   HOUSE OF CHICORY — SHADOWS & ELEVATION
   ------------------------------------------------------------
   Shadows are warm-tinted (built on the ink brown, not pure
   black) so elevation feels soft and crafted rather than harsh.
   Low spread, high blur = "expensive light." Glass surfaces add
   blur + a hairline highlight for the premium overlay treatment.
   ============================================================ */

:root {
  /* warm shadow base = stone-900 @ low alpha */
  --shadow-soft:
    0 1px 2px rgba(33, 28, 21, 0.04),
    0 2px 6px rgba(33, 28, 21, 0.05);

  --shadow-medium:
    0 2px 4px rgba(33, 28, 21, 0.05),
    0 8px 20px rgba(33, 28, 21, 0.08);

  --shadow-large:
    0 4px 10px rgba(33, 28, 21, 0.06),
    0 18px 40px rgba(33, 28, 21, 0.12);

  --shadow-floating:
    0 8px 16px rgba(33, 28, 21, 0.08),
    0 30px 70px rgba(33, 28, 21, 0.18);

  /* inner sunken (sunken surfaces, pressed states) */
  --shadow-inset: inset 0 1px 2px rgba(33, 28, 21, 0.08);

  /* hairline border that reads as elevation on light surfaces */
  --ring-hairline: 0 0 0 1px rgba(33, 28, 21, 0.06);

  /* focus ring */
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Premium glass effect ----
     Use together: backdrop blur + translucent surface + edge
     highlight. Reserved for sticky nav, overlays, floating CTAs. */
  --glass-bg:     var(--surface-glass);
  --glass-blur:   saturate(1.4) blur(18px); /* @kind other */
  --glass-border: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 0 rgba(33, 28, 21, 0.06) /* @kind other */;
  --glass-shadow: 0 10px 30px rgba(33, 28, 21, 0.10);

  /* ---- Semantic roles ---- */
  --elevation-card:     var(--shadow-soft);
  --elevation-card-hover: var(--shadow-medium);
  --elevation-popover:  var(--shadow-large);
  --elevation-dialog:   var(--shadow-floating);
  --elevation-cta:      var(--shadow-medium);
}

[data-theme="dark"] {
  --shadow-soft:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-medium:
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-large:
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 18px 40px rgba(0, 0, 0, 0.6);
  --shadow-floating:
    0 8px 16px rgba(0, 0, 0, 0.5),
    0 30px 70px rgba(0, 0, 0, 0.7);
  --ring-hairline: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --glass-border: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 0 rgba(0, 0, 0, 0.4) /* @kind other */;
}