@import 'preflight.css';

@font-face {
  font-family: 'DM Sans';
  src: url('DMSans-VariableFont.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
}

@font-face {
  font-family: 'DM Sans';
  src: url('DMSans-Italic-VariableFont.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
}

/* @link https://utopia.fyi/type/calculator/?c=375,14,1.125,1240,16,1.125,8,3,&s=0.75|0.5|0.25,1.125|1.25|1.5|2|3|4|6|8,s-l|3xl-5xl|s-l&g=xl,xl,2xl,12 */

:root {

  --primary-font: "DM Sans", sans-serif;
  --secondary-font: gelica, sans-serif;
  --accent-font: "DM Mono", monospace;

  --neutral-0: #FFF;
  --neutral-02: #FAFAFA;
  --neutral-05: #F5F5F5;
  --neutral-10: #E8E8E8;
  --neutral-20: #D1D1D1;
  --neutral-50: #8A8B8B;
  --neutral-80: #454747;
  --neutral-100: #171919;

  --blue-dkr: #23698C;
  --blue-dk: #317EA5;
  --blue: #469dc8;
  --blue-lt: #90C4DE;
  --blue-ltr: #DAEBF4;
  --blue-lst: #E6F2F8;

  /* Gradient Steps */
  --accent-step-0: var(--blue);
  --accent-step-2: #7884d0;
  --accent-step-4: #9e68c7;
  --accent-step-6: #b850ad;
  --accent-step-8: #c64287;
  --accent-step-10: #c8465c;

  --background: var(--neutral-02);
  --negative: var(--neutral-02);
  --highlight: var(--neutral-0);
  --highlight-hover: var(--blue-ltr);
  --scrollbar: var(--neutral-10);
  --hero-background: var(--neutral-10);
  --border-secondary: var(--neutral-10);
  --border-primary: var(--neutral-20);
  --icon: var(--neutral-50);
  --secondary: var(--neutral-80);
  --secondary-hover: var(--neutral-100);
  --text: var(--neutral-100);

  --accent: var(--blue);
  --accent-text: var(--blue-dk);
  --accent-text-hover: var(--blue-dkr);
  --accent-highlight: var(--blue-ltr);
  
  --outline: 2px solid var(--blue-lt);
  --horizontal-border: 1px solid var(--border-secondary);

  --shadow: rgba(0,0,0,0.1);
  
  --horizontal-shadow: inset 0px -1px 0px 0px var(--shadow);
  --full-shadow: inset 0px 0px 0px 1px var(--shadow);
  --element-radius: 2px;

  --step--4: clamp(0.5463rem, 0.5124rem + 0.1443vw, 0.6243rem);
  --step--3: clamp(0.6145rem, 0.5765rem + 0.1624vw, 0.7023rem);
  --step--2: clamp(0.6914rem, 0.6485rem + 0.1827vw, 0.7901rem);
  --step--1: clamp(0.7778rem, 0.7296rem + 0.2055vw, 0.8889rem);
  --step-0: clamp(0.875rem, 0.8208rem + 0.2312vw, 1rem);
  --step-1: clamp(0.9844rem, 0.9234rem + 0.2601vw, 1.125rem);
  --step-2: clamp(1.1074rem, 1.0388rem + 0.2926vw, 1.2656rem);
  --step-3: clamp(1.2458rem, 1.1687rem + 0.3292vw, 1.4238rem);
  --step-4: clamp(1.4016rem, 1.3148rem + 0.3704vw, 1.6018rem);
  --step-5: clamp(1.5768rem, 1.4791rem + 0.4167vw, 1.802rem);
  --step-6: clamp(1.7739rem, 1.664rem + 0.4687vw, 2.0273rem);
  --step-7: clamp(1.9956rem, 1.872rem + 0.5273vw, 2.2807rem);
  --step-8: clamp(2.2451rem, 2.106rem + 0.5932vw, 2.5658rem);
  --step-9: clamp(2.5257rem, 2.3693rem + 0.6674vw, 2.8865rem);
  --step-10: clamp(2.8414rem, 2.6654rem + 0.7508vw, 3.2473rem);

  --space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
  --space-2xs: clamp(0.4375rem, 0.4104rem + 0.1156vw, 0.5rem);
  --space-xs: clamp(0.6875rem, 0.6604rem + 0.1156vw, 0.75rem);
  --space-s: clamp(0.875rem, 0.8208rem + 0.2312vw, 1rem);
  --space-m: clamp(1.125rem, 1.0708rem + 0.2312vw, 1.25rem);
  --space-l: clamp(1.3125rem, 1.2312rem + 0.3468vw, 1.5rem);
  --space-xl: clamp(1.75rem, 1.6416rem + 0.4624vw, 2rem);
  --space-2xl: clamp(2.1875rem, 2.052rem + 0.578vw, 2.5rem);
  --space-3xl: clamp(2.625rem, 2.4624rem + 0.6936vw, 3rem);
  --space-4xl: clamp(3.5rem, 3.2832rem + 0.9249vw, 4rem);
  --space-5xl: clamp(5.25rem, 4.9249rem + 1.3873vw, 6rem);
  --space-6xl: clamp(7rem, 6.5665rem + 1.8497vw, 8rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1416rem + 0.4624vw, 0.5rem);
  --space-2xs-xs: clamp(0.4375rem, 0.302rem + 0.578vw, 0.75rem);
  --space-xs-s: clamp(0.6875rem, 0.552rem + 0.578vw, 1rem);
  --space-s-m: clamp(0.875rem, 0.7124rem + 0.6936vw, 1.25rem);
  --space-m-l: clamp(1.125rem, 0.9624rem + 0.6936vw, 1.5rem);
  --space-l-xl: clamp(1.3125rem, 1.0145rem + 1.2717vw, 2rem);
  --space-xl-2xl: clamp(1.75rem, 1.4249rem + 1.3873vw, 2.5rem);
  --space-2xl-3xl: clamp(2.1875rem, 1.8353rem + 1.5029vw, 3rem);
  --space-3xl-4xl: clamp(2.625rem, 2.0289rem + 2.5434vw, 4rem);
  --space-4xl-5xl: clamp(3.5rem, 2.4162rem + 4.6243vw, 6rem);
  --space-5xl-6xl: clamp(5.25rem, 4.0578rem + 5.0867vw, 8rem);

  /* Custom pairs */
  --space-s-l: clamp(0.875rem, 0.604rem + 1.1561vw, 1.5rem);

  /* Transitions */
  --transition-background: background-color 0.2s ease-out;
  --transition-color: color 0.2s ease-out;
  --transition-opacity: opacity 0.1s ease-out;
}

[data-theme="dark"] {
  --neutral-0: #191919;
  --neutral-02: #1E1E1E;
  --neutral-05: #252525;
  --neutral-10: #303030;
  --neutral-20: #474747;
  --neutral-50: #8C8C8C;
  --neutral-80: #D1D1D1;
  --neutral-100: #FFF;

  --shadow: rgba(255,255,255,0.1);

  --blue-dkr: #7AB8D7;
  --blue-dk: #59A6CD;
  --blue-lt: #335F75;
  --blue-ltr: #22333C;
  --blue-lst: #1F2D33;

  --background: var(--neutral-0);
  --highlight: var(--neutral-02);
  --negative: var(--neutral-100);

}


/* Global */

html,
body {
  background-color: var(--background);
  position: relative;
  color: var(--text);
  font-family: var(--primary-font);
  font-variant-numeric: tabular-nums;
}

*:focus {
  outline: var(--outline);
}

h2 {
  font-size: var(--step-6);
  font-family: var(--secondary-font);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 100%;
}

h3 {
  font-feature-settings: "ss03" 1;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  font-feature-settings: "ss03" 1;
  font-size: var(--step-1);
  max-width: 65ch;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

figcaption {
  font-size: var(--step--2);
  font-feature-settings: "ss03" 1;
  color: var(--secondary);
}

ul:not([data-element="aside-list"]) {
  color: var(--secondary);
  font-feature-settings: "ss03" 1;
  line-height: 125%;
  transition: var(--transition-color);
}

figure {
  max-width: 32rem;
  margin: 0px auto;
}


header {
  background-color: var(--background);
  box-shadow: var(--horizontal-shadow);
  font-size: var(--step--1);
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  position: sticky;
  top: 0;
  z-index: 300;
}

.hero-background {
  background-color: var(--hero-background);
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-6xl);
  align-items: center;
}

section {
  max-width: 40rem;
}

section img {
  max-height: 10rem;
  width: auto;
  align-self: center;
}

footer {
  border-top: 1px solid var(--border-primary);
  bottom: 0;
  color: var(--secondary);
  font-feature-settings: "ss03" 1;
  font-size: var(--step--2);
  line-height: 125%;
  background-color: var(--background);
  padding-top: var(--space-s);
  padding-bottom: var(--space-s);
  position: sticky;
  transition: var(--transition-color);
  z-index: 300;
}

footer a:hover,
footer button:hover {
  color: var(--secondary-hover);
}

hr {
  border: 0;
  margin: 0;
  border-top: var(--horizontal-border);
  width: 100%;
}

img {
  max-width: 100%;
}



/* Layout Utilities */

.center {
  margin-right: auto;
  margin-left: auto;
  max-width: 64rem;
  width: 100%
}

.wrap {
  margin-right: auto;
  margin-left: auto;
  max-width: 64rem;
  padding: 0 var(--space-s-l);
  width: 100%;
}

.insulate {
  padding-top: var(--space-s-l);
  padding-bottom: var(--space-s-l);
}

.insulate-2xl-3xl {
  padding-top: var(--space-2xl-3xl);
  padding-bottom: var(--space-2xl-3xl);
}

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  flex-grow: 1;
}

.not-sidebar {
  flex-basis: 0;
  flex-grow: 999;
}

[class*="stack"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

[class*="cluster"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-xs);
}

[class*="grid"] {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.stack-2xs {
  gap: var(--space-2xs);
}

.stack-3xl {
  gap: var(--space-3xl);
}

.stack-2xl {
  gap: var(--space-2xl);
}

.stack-l {
  gap: var(--space-l);
}

.grid-xl {
  gap: var(--space-xl);
}

.columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cluster-center {
  align-items: center;
}

.clickable {
  cursor: pointer;
  user-select: none;
}

.unselectable {
  user-select: none;
}

.scrollable-container {
  height: 100%;
  overflow: hidden;
}

.scrollable {
  overflow-y: auto;
  height: 100%;
}

.scroll-lock,
.help-lock {
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-padding {
  padding: 2px;
}

.disable-transitions * {
  transition: none !important;
}

/* Hero / CTA */

.hero,
.cta {
  background-color: var(--hero-background);
}

.cta {
  align-items: center;
  background-color: var(--hero-background);
  border-radius: 8px;
  max-width: 40rem;
  padding: var(--space-3xl-4xl) var(--space-3xl-4xl) 0 var(--space-3xl-4xl);
  width: 100%;
}

.hero-title {
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: var(--step-10);
  text-align: center;
  line-height: 100%;
  letter-spacing: -0.03em;
  opacity: 1;
  padding: var(--space-4xl) 0;
  transform: scale(1);
  transition: opacity 1s cubic-bezier(0.250,0.460,0.450,0.940), transform 1s cubic-bezier(0.250,0.460,0.450,0.940);
}

.cta-content > h2 {
  font-size: var(--step-7);
}

.hero-title.hidden {
  transform: scale(0.9);
  opacity: 0.5;
}

.hero-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  align-items: center;
}

.hero-image {
  max-width: 30rem;
  overflow: hidden;
}

.hero-image img {
  opacity: 1;
  transform: translate(0);
  transition: opacity 1s cubic-bezier(0.250,0.460,0.450,0.940), transform 1s cubic-bezier(0.250,0.460,0.450,0.940);
}

.hero-image img.hidden {
  transform: translate(0, 4rem);
  opacity: 0.5;
}

.hero-content,
.cta-content {
  max-width: 20rem;
}

.cta-image {
  display: flex;
}

@media (min-width: 768px) {
  .hero-wrapper,
  .cta {
    flex-direction: row-reverse;
    align-items: start;
  }

  .hero-image {
    flex-basis: 0;
    flex-grow: 999;
    padding: 0 var(--space-4xl);
    max-width: 100%;
  }

  .cta-image {
    flex-basis: 0;
    flex-grow: 999;
    max-width: 100%;
  }

  .hero-content,
  .cta-content {
    flex-shrink: 0;
  }
}


/* Buttons / Forms */

button {
  appearance: none;
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-feature-settings: "ss03" 1;
  padding: 0;
  user-select: none;
}

.button {
  align-items: center;
  border-radius: var(--element-radius);
  box-shadow: var(--full-shadow);
  display: flex;
  justify-content: center;
  padding: var(--space-2xs) var(--space-xs);
  transition: var(--transition-background), var(--transition-color);
  user-select: none;
}

.button:hover,
.button.active {
  background-color: var(--highlight-hover);
}

button:disabled {
  cursor: default;
  opacity: 0.25;
}

select {
  background-color: transparent;
  background-image: url('/select-arrow.svg');
  background-repeat: no-repeat;
  background-position: center right var(--space-3xs);
  background-size: var(--space-s) var(--space-s);
  border: 0;
  border-radius: var(--element-radius);
  box-shadow: var(--full-shadow);
  line-height: var(--space-s);
  padding: var(--space-2xs) var(--space-xl) var(--space-2xs) var(--space-xs);
  position: relative;
  transition: var(--transition-background), var(--transition-color);
  user-select: none;
}

select:hover{
  background-color: var(--highlight-hover);
}

.button,
select {
  color: var(--secondary);
  font-size: var(--step--3);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.button-label {
  line-height: var(--space-s);
  padding-top: 2px;
}

.button-icon {
  gap: calc(var(--space-xs) * 0.4);
  padding-left: calc(var(--space-xs) * 0.6);
}

.button-icon-reverse {
  flex-direction: row-reverse;
  padding-left: var(--space-xs);
  padding-right: calc(var(--space-xs) * 0.6);
}

.button .icon {
  color: var(--accent);
  height: var(--space-s);
  width: var(--space-s);
}

.button-large {
  font-size: var(--step--2);
  line-height: var(--space-s);
  padding: var(--space-xs) var(--space-s);
}

.button-accent {
  box-shadow: var(--full-shadow);
  background-color: var(--accent-text);
  color: var(--negative);
  font-weight: 800;
}

.say-hi:hover {
  color: var(--accent-text-hover);
}

.button-accent:hover {
  background-color: var(--accent-text-hover);
}

.say-hi {
  font-size: var(--step--2);
  line-height: var(--space-s);
  color: var(--accent-text);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* Help */

.help-outer-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.help-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1500;
  padding: var(--space-l);
}

.help {
  background-color: var(--neutral-05);
  padding: var(--space-l);
  max-width: 48rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--element-radius);
}

.help .button {
  margin-right: auto;
  margin-left: auto;
}

.help-overlay {
  position: absolute;
  z-index: 1250;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--background);
  opacity: 0.75;
  overflow: hidden;
}

/* Icons */

.logo {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
}

.logo > a {
  align-items: center;
  display: flex;
}

.logo > a > svg {
  border-radius: 9999px;
  height: var(--space-xl);
  width: auto;
}

.logo > svg {
  height: var(--step--1);
  width: auto;
}

.icon {
  align-items: center;
  color: var(--icon);
  display: flex;
  height: var(--space-s);
  justify-content: center;
  width: var(--space-s);
}


/* List */

.list-item {
  align-items: baseline;
  border-radius: var(--element-radius);
  color: var(--secondary);
  display: flex;
  line-height: var(--space-l);
  min-height: var(--space-2xl);
  padding: var(--space-2xs) var(--space-xs);
  transition: var(--transition-background), var(--transition-color);
}

.list-item:hover,
.list-item.active-item {
  background-color: var(--accent-highlight);
}

.list-item-label {
  line-height: var(--step--1);
}

.list-item-data {
  display: inline-block;
  font-family: var(--primary-font);
  font-size: var(--step--3);
  font-weight: 400;
  opacity: 0.8;
  padding-left: var(--space-3xs);
}


/* Samples */

.sample-wrapper {
  height: var(--space-6xl);
}

.sample-header {
  align-items: center;
  display: flex;
  gap: var(--space-s);
  height: var(--space-3xl);
  justify-content: space-between;
}

.sample-align {
  align-items: baseline;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.sample-leader {
  width: 0;
  overflow: hidden;
}

.sample-text {
  position: relative;
  width: 100%;
}

.sample-line,
.sample-display-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.sample-display-text {
  z-index: 50;
}

.sample-line {
  z-index: 40;
}

.sample-reference {
  z-index: 30;
}

.sample-guide-text {
  opacity: 0;
}

.sample-line > hr {
  display: inline-block;
  border-top: 1.5px solid var(--border-primary);
}

.sample-reference > hr {
  border-color: var(--accent-step-10);
}

.sample-xline > hr {
  border-color: var(--accent-step-0);
}


/* Scrollbar */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border: none;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar);
  border-radius: 4px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

/* Sidebar */

.sidebar-container {
  position: relative;
}

.aside-list {
  height: 0;
  transition: height .3s ease-out;
}

.aside-list.active {
  height: 100%;
}

.aside-header {
  align-items: center;
  color: var(--secondary);
}

.main {
  transform: translateX(0%);
  transition: transform 0.3s ease-out;
}

.aside {
  background-color: var(--background);
  bottom: var(--space-3xl);
  height: auto;
  max-width: 16rem;
  position: fixed;
  right: 0;
  top: var(--space-4xl);
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
  width: 100%;
  z-index: 200;
}

.aside-overlay {
  position: absolute;
  z-index: 150;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--background);
  opacity: 0.5;
  display: none;
  overflow: hidden;
}

.sidebar-open .aside {
  transform: translateX(0);
}

.sidebar-open .aside-overlay {
  display: block;
}

.sidebar-open .main {
  transform: translateX(-16rem);
}

@media (min-width: 1024px) {

  .app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  .sidebar-container {
    display: flex;
  }

  .aside {
    position: static;
    flex-shrink: 0;
    height: 100%;
    transform: translateX(0);
  }
  
  .main {
    flex-grow: 1;
    width: 100%;
    position: relative;
    transform: translateX(0);
    transition: transform 0.3s ease-out;
  }
  
  .sidebar-open .aside-overlay {
    display: none;
  }
  
  .sidebar-open .main {
    transform: translateX(0);
  }
  
}


/* Test */

.test-title {
  max-width: 40ch;
}

.test-paragraph {
  max-width: 65ch;
}


/* X Height */

[data-step="0"] {
  --xheight-accent: var(--accent-step-0);
}

[data-step="2"] {
  --xheight-accent: var(--accent-step-2);
}

[data-step="4"] {
  --xheight-accent: var(--accent-step-4);
}

[data-step="6"] {
  --xheight-accent: var(--accent-step-6);
}

[data-step="8"] {
  --xheight-accent: var(--accent-step-8);
}

[data-step="10"] {
  --xheight-accent: var(--accent-step-10);
}

.xheight {
  align-items: center;
  background-color: var(--xheight-accent);
  border-radius: 9999px;
  box-shadow: var(--full-shadow);
  display: flex;
  flex-shrink: 0;
  height: var(--space-3xl);
  justify-content: center;
  width: var(--space-3xl);
}

.xheight-content {
  align-items: start;
  color: var(--negative);
  display: flex;
  font-family: var(--secondary-font);
  font-size: var(--step-2);
  font-weight: 700;
  gap: 0px;
  padding-top: 1px;
  padding-left: 1px;
}

.xheight-percentage {
  opacity: 0.8;
  font-size: var(--step--3);
  padding-top: 3px;
}


/* Typography */

.data {
  font-size: var(--step--1);
  font-family: var(--accent-font);
  font-weight: 500;
  opacity: 0.8;
}