@import "@radix-ui/colors/jade.css";
@import "@radix-ui/colors/jade-alpha.css";
@import "@radix-ui/colors/jade-dark.css";
@import "@radix-ui/colors/jade-dark-alpha.css";
@import "@radix-ui/colors/gray.css";
@import "@radix-ui/colors/gray-alpha.css";
@import "@radix-ui/colors/gray-dark.css";
@import "@radix-ui/colors/gray-dark-alpha.css";
@import "@radix-ui/colors/blue.css";
@import "@radix-ui/colors/blue-alpha.css";
@import "@radix-ui/colors/blue-dark.css";
@import "@radix-ui/colors/blue-dark-alpha.css";
@import "@radix-ui/colors/green.css";
@import "@radix-ui/colors/green-alpha.css";
@import "@radix-ui/colors/green-dark.css";
@import "@radix-ui/colors/green-dark-alpha.css";
@import "@radix-ui/colors/amber.css";
@import "@radix-ui/colors/amber-alpha.css";
@import "@radix-ui/colors/amber-dark.css";
@import "@radix-ui/colors/amber-dark-alpha.css";
@import "@radix-ui/colors/purple.css";
@import "@radix-ui/colors/purple-alpha.css";
@import "@radix-ui/colors/purple-dark.css";
@import "@radix-ui/colors/purple-dark-alpha.css";
@import "@radix-ui/colors/pink.css";
@import "@radix-ui/colors/pink-alpha.css";
@import "@radix-ui/colors/pink-dark.css";
@import "@radix-ui/colors/pink-dark-alpha.css";
@import "@radix-ui/colors/red.css";
@import "@radix-ui/colors/red-alpha.css";
@import "@radix-ui/colors/red-dark.css";
@import "@radix-ui/colors/red-dark-alpha.css";
@import "@radix-ui/colors/white-alpha.css";
@import "@radix-ui/colors/black-alpha.css";

:root {
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,720,21,1.25,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--1: clamp(0.8889rem, 0.88rem + 0.0444vi, 0.9rem);
  --step-0: clamp(1rem, 0.9rem + 0.5vi, 1.125rem);
  --step-1: clamp(1.125rem, 0.9rem + 1.125vi, 1.4063rem);
  --step-2: clamp(1.2656rem, 0.8719rem + 1.9688vi, 1.7578rem);
  --step-3: clamp(1.4238rem, 0.8051rem + 3.0938vi, 2.1973rem);
  --step-4: clamp(1.6018rem, 0.686rem + 4.5791vi, 2.7466rem);
  --step-5: clamp(1.802rem, 0.4971rem + 6.5248vi, 3.4332rem);
  --step-6: clamp(2.0273rem, 0.2159rem + 9.057vi, 4.2915rem);

  /* @link https://utopia.fyi/space/calculator?c=320,8,1.2,1240,12,1.333,6,2,&s=0.75|0.5,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --space-2xs: clamp(0.25rem, 0.2065rem + 0.2174vw, 0.375rem);
  --space-xs: clamp(0.375rem, 0.3098rem + 0.3261vw, 0.5625rem);
  --space-s: clamp(0.5rem, 0.413rem + 0.4348vw, 0.75rem);
  --space-m: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
  --space-l: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);
  --space-xl: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
  --space-2xl: clamp(2rem, 1.6522rem + 1.7391vw, 3rem);
  --space-3xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);

  /* Line heights */
  --line-height-single: 1;
  --line-height-display: 1.1;
  --line-height-tight: 1.3;
  --line-height-snug: 1.4;
  --line-height-body: 1.5;

  /* Letter spacing */
  --letter-spacing-condensed: -0.005em;
  --letter-spacing-normal: 0;
  --letter-spacing-loose: 0.01em;

  /* Radii */
  --radius-xs: var(--space-2xs);
  --radius-s: var(--space-xs);
  --radius-m: var(--space-s);
  --radius-l: var(--space-m);
  --radius-full: 9999px;

  /* Font weights */
  --font-weight-normal: 380;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* Shadows */
  --shadow-color: 0deg 0% 0%;
  --shadow-s:
    0px 0.6px 0.6px hsl(var(--shadow-color) / 17%),
    0px 0.9px 0.9px -1.7px hsl(var(--shadow-color) / 14%),
    0px 2.5px 2.4px -3.5px hsl(var(--shadow-color) / 11%);
  --shadow-m:
    0px 0.6px 0.6px hsl(var(--shadow-color) / 12%),
    0px 1.6px 1.6px -1.2px hsl(var(--shadow-color) / 10%),
    0px 4.7px 4.6px -2.3px hsl(var(--shadow-color) / 7%),
    0px 12.5px 12.2px -3.5px hsl(var(--shadow-color) / 4%);
  --shadow-l:
    0px 0.6px 0.6px hsl(var(--shadow-color) / 17%),
    0px 2.6px 2.5px -0.5px hsl(var(--shadow-color) / 16%),
    0px 5.3px 5.2px -1px hsl(var(--shadow-color) / 15%),
    0px 9.7px 9.5px -1.5px hsl(var(--shadow-color) / 13%),
    0px 17px 16.6px -2px hsl(var(--shadow-color) / 12%),
    0px 28.4px 27.7px -2.5px hsl(var(--shadow-color) / 11%),
    -0.1px 45.2px 44.1px -3px hsl(var(--shadow-color) / 10%),
    -0.1px 68.4px 66.7px -3.5px hsl(var(--shadow-color) / 8%);
}

.dark {
  --font-weight-normal: 360;
}
