/* ============================================================
   GateHouse — Effects: radii, borders, shadows, blur
   ------------------------------------------------------------
   Precise, restrained. Small radii. Soft layered shadows tinted
   navy; a Cobalt "glow" for active brand accents and an Ember
   one reserved for live data.
   ============================================================ */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   11px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* ---- Border widths ---- */
  --border-w:        1px;
  --border-w-strong: 1.5px;
  --border-w-focus:  2px;

  /* ---- Hairline helpers ---- */
  --hairline:        1px solid var(--border);
  --hairline-subtle: 1px solid var(--border-subtle);
  --hairline-strong: 1px solid var(--border-strong);

  /* ---- Shadows (light ground) ---- */
  --shadow-xs:  0 1px 2px rgba(10, 16, 37, 0.06);
  --shadow-sm:  0 1px 3px rgba(10, 16, 37, 0.08), 0 1px 2px rgba(10, 16, 37, 0.05);
  --shadow-md:  0 4px 12px rgba(10, 16, 37, 0.08), 0 1px 3px rgba(10, 16, 37, 0.06);
  --shadow-lg:  0 12px 28px rgba(10, 16, 37, 0.12), 0 4px 8px rgba(10, 16, 37, 0.06);
  --shadow-xl:  0 24px 56px rgba(10, 16, 37, 0.18), 0 8px 16px rgba(10, 16, 37, 0.08);

  /* ---- Inner shadow (inputs, wells) ---- */
  --shadow-inset: inset 0 1px 2px rgba(10, 16, 37, 0.07);

  /* ---- Glows — active accent only, never decoration.
         cobalt = brand/active, ember = live data ---- */
  --glow-ember: 0 0 0 1px rgba(242, 112, 29, 0.5), 0 0 18px var(--ember-glow);
  --glow-cobalt:  0 0 0 1px rgba(143, 173, 252, 0.5), 0 0 16px rgba(29, 78, 216, 0.32);

  /* ---- Focus ring ---- */
  --ring-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);

  /* ---- Blur (frosted overlays, cleanroom veil) ---- */
  --blur-sm: blur(6px);  /* @kind other */
  --blur-md: blur(14px); /* @kind other */
  --blur-lg: blur(28px); /* @kind other */
}

/* Shadows read differently on dark surfaces — deepen them */
[data-theme="dark"] {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 28px 64px rgba(0, 0, 0, 0.6), 0 10px 20px rgba(0, 0, 0, 0.45);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}