:root {
  color-scheme: light dark;

  /* spacing scale ratio */
  --s-ratio: 1.25;
  /* text block max width */
  --measure: 60ch;

  /* TYPOGRAPHY */
  /* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1480,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,2xl,12 */
  --step--2: clamp(0.7813rem, 0.7752rem + 0.0268vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9174rem + 0.0893vw, 1rem);
  --step-0 : clamp(1.125rem , 1.0848rem + 0.1786vw, 1.25rem);
  --step-1 : clamp(1.35rem  , 1.2817rem + 0.3036vw, 1.5625rem);
  --step-2 : clamp(1.62rem  , 1.5129rem + 0.4759vw, 1.9531rem);
  --step-3 : clamp(1.944rem , 1.7841rem + 0.7106vw, 2.4414rem);
  --step-4 : clamp(2.3328rem, 2.1017rem + 1.0271vw, 3.0518rem);
  --step-5 : clamp(2.7994rem, 2.473rem  + 1.4505vw, 3.8147rem);

  --text-xs   : var(--step--2);
  --text-sm   : var(--step--1);
  --text-base : var(--step-0);
  --text-prose: var(--step-1);
  --text-md   : var(--step-2);
  --text-lg   : var(--step-3);
  --text-xl   : var(--step-4);
  --text-2xl  : var(--step-5);

  --text-weight-md: 600;

  --text-height-base: 1;
  --text-height-md  : calc(var(--text-height-base) * var(s-ratio));

  /* SPACING */
  /* @link https://utopia.fyi/space/calculator?c=360,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */
  --space-3xs    : clamp(0.25rem, 0.2244rem + 0.1136vw, 0.3125rem);
  --space-2xs    : clamp(0.5rem , 0.4489rem + 0.2273vw, 0.625rem);
  --space-xs     : clamp(0.75rem, 0.6733rem + 0.3409vw, 0.9375rem);
  --space-s      : clamp(1rem   , 0.8977rem + 0.4545vw, 1.25rem);
  --space-m      : clamp(1.5rem , 1.3466rem + 0.6818vw, 1.875rem);
  --space-l      : clamp(2rem   , 1.7955rem + 0.9091vw, 2.5rem);
  --space-xl     : clamp(3rem   , 2.6932rem + 1.3636vw, 3.75rem);
  --space-2xl    : clamp(4rem   , 3.5909rem + 1.8182vw, 5rem);
  --space-3xl    : clamp(6rem   , 5.3864rem + 2.7273vw, 7.5rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.0966rem + 0.6818vw, 0.625rem);
  --space-2xs-xs : clamp(0.5rem , 0.321rem  + 0.7955vw, 0.9375rem);
  --space-xs-s   : clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  --space-s-m    : clamp(1rem   , 0.642rem  + 1.5909vw, 1.875rem);
  --space-m-l    : clamp(1.5rem , 1.0909rem + 1.8182vw, 2.5rem);
  --space-l-xl   : clamp(2rem   , 1.2841rem + 3.1818vw, 3.75rem);
  --space-xl-2xl : clamp(3rem   , 2.1818rem + 3.6364vw, 5rem);
  --space-2xl-3xl: clamp(4rem   , 2.5682rem + 6.3636vw, 7.5rem);

  /* GRID */
  /* @link https://utopia.fyi/grid/calculator?c=360,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,&g=s,l,xl,12 */
  --grid-max-width: 77.50rem;
  --grid-gutter: var(--space-xs-s, clamp(1rem, 0.3767rem + 2.7397vw, 2.5rem));
  --grid-columns: 12;

  /* RAW COLORS */
  --color-white-off    : #f2f2f2;
  --color-purple-dark  : #190e21;
  --color-purple       : #2f1c3d;
  --color-purple-medium: #8837ef;
  --color-purple-light : #f3eef9;
  --color-yellow       : #fabe21;
  --color-yellow-pale  : #fbd05f;
  --color-blue-light   : #e1f1f5;
  --color-grey-light   : #d0d4dd;
  --color-grey-dark    : #a2a6af;

  /* CONTEXTUAL COLORS */
  --color-background: light-dark(var(--color-white-off), var(--color-purple-dark));
  --color-foreground: light-dark(var(--color-purple-dark), var(--color-white-off));

  --color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));

  /* --color-shadow: light-dark(); */

  --color-confirm      : light-dark(green, green);
  --color-confirm-light: #62cb3b;
  --color-warning      : #bf1818;
  --color-warning-light: red;

 
  /* BOX STYLES */

  --box-border-thin: calc(var(--space-3xs) * .5) solid var(--color-grey)

}

[data-theme="light"] {
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
}

h1,
h2,
h3,
h4,
h5,
h6,
main,
p {
  max-inline-size: var(--measure);
}

/* utilities */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--text-weight-md);
}

h1 {
  font-size: var(--text-lg);
}

h2 {
  font-size: var(--text-md);
}

h3 {
  font-size: var(--text-base);
}

h4,
h5,
h6 {
  font-size: var(--text-sm);
}