/*
 * Border Tokens
 *
 * Radii are a base scale multiplied by --sigvelo-radius-scale, so a product,
 * a theme, or one subtree can go rounder or squarer by setting a single
 * variable instead of overriding every radius. Set it on :root for a global
 * change, or on any element to rescale that subtree.
 *
 * --sigvelo-radius-full and --sigvelo-radius-circle stay unscaled: a pill and
 * a circle are shapes, not sizes.
 */

:root {
  --sigvelo-border-style: solid;
  --sigvelo-border-width: 1px;

  /* Hairline rules and rings. Sub-pixel on 1x, crisp on 2x. */
  --sigvelo-border-width-hairline: 0.5px;

  --sigvelo-radius-scale: 1;

  --sigvelo-radius-xs-base: 0.1875rem; /* 3px */
  --sigvelo-radius-sm-base: 0.25rem; /* 4px */
  --sigvelo-radius-md-base: 0.5rem; /* 8px */
  --sigvelo-radius-lg-base: 0.75rem; /* 12px */
  --sigvelo-radius-xl-base: 1rem; /* 16px */
  --sigvelo-radius-2xl-base: 1.25rem; /* 20px */
  --sigvelo-radius-3xl-base: 1.5rem; /* 24px */

  --sigvelo-radius-xs: calc(var(--sigvelo-radius-xs-base) * var(--sigvelo-radius-scale));
  --sigvelo-radius-sm: calc(var(--sigvelo-radius-sm-base) * var(--sigvelo-radius-scale));
  --sigvelo-radius-md: calc(var(--sigvelo-radius-md-base) * var(--sigvelo-radius-scale));
  --sigvelo-radius-lg: calc(var(--sigvelo-radius-lg-base) * var(--sigvelo-radius-scale));
  --sigvelo-radius-xl: calc(var(--sigvelo-radius-xl-base) * var(--sigvelo-radius-scale));
  --sigvelo-radius-2xl: calc(var(--sigvelo-radius-2xl-base) * var(--sigvelo-radius-scale));
  --sigvelo-radius-3xl: calc(var(--sigvelo-radius-3xl-base) * var(--sigvelo-radius-scale));

  --sigvelo-radius-full: 9999px;
  --sigvelo-radius-circle: 50%;

  /* Applied by the shared surface, row, control, and button recipes. Only
     rounded rectangles opt in — pills and circles keep a true arc. */
  --sigvelo-corner-shape: round;
}

/*
 * Squircle corners where the browser can draw them. A superellipse cuts less
 * material out of the corner than a circular arc, so the same radius reads
 * tighter; the scale opens up to compensate and the two changes ship together.
 * Browsers without corner-shape keep round corners at the unscaled radii and
 * look exactly as they did before.
 */
@supports (corner-shape: superellipse(1.5)) {
  :root {
    --sigvelo-corner-shape: superellipse(1.5);
    --sigvelo-radius-scale: 1.25;
  }
}