/* ============================================================================
   EXP [design] — LIQUID GLASS & ELEVATION
   The chrome is built from macOS-26 "Liquid Glass": real backdrop blur + a thin
   tint + a lit top edge + a soft drop shadow. Two core thicknesses per the
   brief — THIN (toolbars, trays, inline chips) and MEDIUM (panels, popovers,
   modals) — plus extra "thickness" layers for hierarchy.

   HOW TO USE
     .glass-thin   → backdrop material for light chrome (toolbar, header)
     .glass-medium → panels & popovers (the default panel material)
     .glass-thick  → modals / floating component editor (max separation)
     .glass-edge   → adds the lit hairline + inner sheen (compose on any glass)
   Each reads tint/blur/border/shadow tokens so a Reduce-Transparency fallback
   is one swap away (use --surface-*-solid).
   ========================================================================== */

:root {
  /* ---- Blur radii (the "thickness") ------------------------------------- */
  --glass-blur-thin:   16px;
  --glass-blur-medium: 30px;
  --glass-blur-thick:  50px;
  --glass-saturate:    180%;   /* lets color from the canvas bleed through    */

  /* ---- Tints (sit OVER the blur; dark home) ----------------------------- */
  --glass-tint-thin:   rgba(28, 28, 31, 0.46);
  --glass-tint-medium: rgba(30, 30, 33, 0.66);
  --glass-tint-thick:  rgba(34, 34, 38, 0.78);

  /* ---- Edges & sheen ---------------------------------------------------- */
  --glass-border:      rgba(255, 255, 255, 0.12);   /* the lit rim            */
  --glass-border-soft: rgba(255, 255, 255, 0.07);
  --glass-sheen:       linear-gradient(180deg,
                         rgba(255,255,255,0.10) 0%,
                         rgba(255,255,255,0.02) 18%,
                         rgba(255,255,255,0) 40%); /* @kind other */
  --glass-inner-hi:    inset 0 1px 0 0 rgba(255,255,255,0.10);  /* @kind shadow */
  --glass-inner-lo:    inset 0 -1px 0 0 rgba(0,0,0,0.25);       /* @kind shadow */

  /* ---- Elevation (drop shadows; layered for depth) ---------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.34);
  --shadow-panel:  0 8px 28px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.05);
  --shadow-popover:0 12px 40px rgba(0,0,0,0.50), 0 0 0 0.5px rgba(0,0,0,0.6);
  --shadow-modal:  0 30px 80px rgba(0,0,0,0.62), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-drag:   0 16px 40px rgba(0,0,0,0.5);

  /* Brand glow — for the lime mark / focus on hero surfaces only. */
  --glow-lime: 0 0 24px rgba(76, 230, 46, 0.45);
  --glow-accent: 0 0 0 var(--stroke-focus) var(--accent),
                 0 0 0 calc(var(--stroke-focus) + 2px) var(--accent-subtle);
}

@media (prefers-color-scheme: light) {
  :root {
    --glass-tint-thin:   rgba(255, 255, 255, 0.55);
    --glass-tint-medium: rgba(255, 255, 255, 0.70);
    --glass-tint-thick:  rgba(255, 255, 255, 0.82);
    --glass-border:      rgba(255, 255, 255, 0.85);
    --glass-border-soft: rgba(0, 0, 0, 0.06);
    --glass-sheen:       linear-gradient(180deg,
                           rgba(255,255,255,0.6) 0%,
                           rgba(255,255,255,0.1) 22%,
                           rgba(255,255,255,0) 44%); /* @kind other */
    --glass-inner-hi:    inset 0 1px 0 0 rgba(255,255,255,0.9); /* @kind shadow */
    --glass-inner-lo:    inset 0 -1px 0 0 rgba(0,0,0,0.05); /* @kind shadow */
    --shadow-1: 0 1px 2px rgba(0,0,0,0.10);
    --shadow-2: 0 2px 8px rgba(0,0,0,0.12);
    --shadow-panel:  0 8px 28px rgba(0,0,0,0.16), 0 1px 0 rgba(255,255,255,0.6);
    --shadow-popover:0 12px 40px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(0,0,0,0.12);
    --shadow-modal:  0 30px 80px rgba(0,0,0,0.24);
    --shadow-drag:   0 16px 40px rgba(0,0,0,0.20);
  }
}

/* ---------------------------------------------------------------------------
   Composable material classes. Apply a backdrop-filter for real glass; the
   tint + edges give it body. `.glass-edge` layers the lit rim & sheen on top.
   --------------------------------------------------------------------------- */
.glass-thin {
  background: var(--glass-tint-thin);
  backdrop-filter: blur(var(--glass-blur-thin)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-thin)) saturate(var(--glass-saturate));
  border: var(--stroke-hairline) solid var(--glass-border-soft);
}
.glass-medium {
  background: var(--glass-tint-medium);
  backdrop-filter: blur(var(--glass-blur-medium)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-medium)) saturate(var(--glass-saturate));
  border: var(--stroke-hairline) solid var(--glass-border);
  box-shadow: var(--shadow-panel);
}
.glass-thick {
  background: var(--glass-tint-thick);
  backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-thick)) saturate(var(--glass-saturate));
  border: var(--stroke-hairline) solid var(--glass-border);
  box-shadow: var(--shadow-modal);
}
.glass-edge {
  box-shadow: var(--glass-inner-hi), var(--glass-inner-lo);
  position: relative;
}
.glass-edge::before {   /* the sheen overlay — top-down highlight */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; background: var(--glass-sheen);
}

/* Reduce-Transparency / no-backdrop fallback — opaque plates. */
@media (prefers-reduced-transparency: reduce) {
  .glass-thin   { background: var(--surface-panel-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-medium { background: var(--surface-panel-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass-thick  { background: var(--surface-raised);      backdrop-filter: none; -webkit-backdrop-filter: none; }
}