/* Tangram Studios, radii, borders, shadows, motion */
:root {
  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-medium:   1.5px;
  --border-thick:    2px;

  /* Soft, low-spread shadows, premium and restrained, warm-tinted */
  --shadow-xs:  0 1px 2px rgba(26,26,26,0.06);
  --shadow-sm:  0 1px 3px rgba(26,26,26,0.08), 0 1px 2px rgba(26,26,26,0.04);
  --shadow-md:  0 4px 12px rgba(26,26,26,0.08), 0 2px 4px rgba(26,26,26,0.04);
  --shadow-lg:  0 12px 32px rgba(26,26,26,0.10), 0 4px 8px rgba(26,26,26,0.05);
  --shadow-xl:  0 24px 60px rgba(26,26,26,0.14), 0 8px 16px rgba(26,26,26,0.06);
  --shadow-brand: 0 8px 24px rgba(227,93,37,0.28);

  --ring-focus: 0 0 0 3px rgba(227,93,37,0.35);

  /* Liquid glass, iOS-26-style translucent surfaces.
     Compose: background var(--glass-fill); backdrop-filter var(--glass-backdrop);
     border 1px solid var(--glass-border); box-shadow var(--glass-shadow), var(--glass-highlight). */
  --glass-backdrop:      saturate(180%) blur(20px); /* @kind other */
  --glass-backdrop-sm:   saturate(160%) blur(10px); /* @kind other */
  --glass-backdrop-xs:   saturate(150%) blur(6px); /* @kind other */
  --glass-fill-clear:    rgba(255,255,255,0); /* fully transparent, refraction only */
  --glass-fill-vapor:    rgba(255,255,255,0.12);
  --glass-fill-sheer:    rgba(255,255,255,0.28);
  --glass-fill:          rgba(255,255,255,0.55);
  --glass-fill-strong:   rgba(255,255,255,0.72);
  --glass-fill-brand:    rgba(227,93,37,0.14);
  --glass-fill-dark:     rgba(26,26,26,0.42);
  --glass-border:        rgba(255,255,255,0.65);
  --glass-border-sheer:  rgba(255,255,255,0.38);
  --glass-border-vapor:  rgba(255,255,255,0.22);
  --glass-border-clear:  rgba(255,255,255,0.30);
  --glass-border-dark:   rgba(255,255,255,0.16);
  --glass-highlight:     inset 0 1px 0 rgba(255,255,255,0.7); /* @kind shadow */
  --glass-highlight-sheer: inset 0 1px 0 rgba(255,255,255,0.42); /* @kind shadow */
  --glass-highlight-vapor: inset 0 1px 0 rgba(255,255,255,0.26); /* @kind shadow */
  --glass-highlight-clear: inset 0 1px 0 rgba(255,255,255,0.34), inset 0 -1px 0 rgba(255,255,255,0.14); /* @kind shadow */
  --glass-backdrop-clear:  saturate(190%) contrast(108%) brightness(106%) blur(14px); /* @kind other */
  --glass-shadow:        0 8px 32px rgba(26,26,26,0.12), 0 2px 8px rgba(26,26,26,0.06);

  /* Motion, quick, confident, minimal bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-normal: 200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}