/* REFERENCE LAYER — fluid space scale, radius, border width, opacity.
   Space comes from the same Utopia config as the type scale (364→1480px,
   16→20px base), so space and type scale together: multipliers
   0.125 / 0.25 / 0.5 / 0.75 / 1 / 1.5 / 2 / 3 / 4 / 6 of the base step.
   Radii and border widths are NOT fluid — they are fixed by design. */
:root {
  --fluid-scale-4xs: clamp(0.125rem, 0.1148rem + 0.0448vw, 0.1563rem); /* @kind spacing */ /* 2 … 2.5px */
  --fluid-scale-3xs: clamp(0.25rem, 0.2296rem + 0.0896vw, 0.3125rem); /* @kind spacing */ /* 4 … 5px */
  --fluid-scale-2xs: clamp(0.5rem, 0.4592rem + 0.1792vw, 0.625rem); /* @kind spacing */ /* 8 … 10px */
  --fluid-scale-xs: clamp(0.75rem, 0.6888rem + 0.2688vw, 0.9375rem); /* @kind spacing */ /* 12 … 15px */
  --fluid-scale-sm: clamp(1rem, 0.9185rem + 0.3584vw, 1.25rem); /* @kind spacing */ /* 16 … 20px */
  --fluid-scale-md: clamp(1.5rem, 1.3777rem + 0.5376vw, 1.875rem); /* @kind spacing */ /* 24 … 30px */
  --fluid-scale-lg: clamp(2rem, 1.8369rem + 0.7168vw, 2.5rem); /* @kind spacing */ /* 32 … 40px */
  --fluid-scale-xl: clamp(3rem, 2.7554rem + 1.0753vw, 3.75rem); /* @kind spacing */ /* 48 … 60px */
  --fluid-scale-2xl: clamp(4rem, 3.6738rem + 1.4337vw, 5rem); /* @kind spacing */ /* 64 … 80px */
  --fluid-scale-3xl: clamp(6rem, 5.5108rem + 2.1505vw, 7.5rem); /* @kind spacing */ /* 96 … 120px */

  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  --width-100: 1px;
  --width-200: 2px;
  --width-300: 3px;
  --width-400: 4px;

  --opacity-100: 0.04; /* @kind other */
  --opacity-200: 0.08; /* @kind other */
  --opacity-300: 0.12; /* @kind other */
  --opacity-400: 0.16; /* @kind other */
  --opacity-500: 0.38; /* @kind other */
  --opacity-600: 0.6; /* @kind other */
  --opacity-700: 0.88; /* @kind other */
}