/* 
  this gets borked in the postcss build process somewhere, so commenting out 
  for now and manually importing with 'link' tag
*/
/* @import '/style/tokens.css'; */

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-family: 'Space Grotesk', Arial, 'Roboto',sans-serif;
  scroll-padding-top: 5rem;
  /* --black: #000;
  --gray: #5F5F5F;
  --green: #29CF3D;
  --red: #FF5440;
  --violet: #8580D2;
  --white: #fff;
  --yellow: #E2E639; */
  --font-family: 'Space Grotesk', Arial, 'Roboto',sans-serif;
  --text-4xl: 2.75rem/3.5rem var(--font-family);
  --text-3xl: 2.375rem/3.25rem var(--font-family);
  --text-2xl: 1.75rem/2.5rem var(--font-family);
  --text-xl: 1.375rem/2.25rem var(--font-family);
  --text-lg: 1.125rem/1.75rem var(--font-family);
  --text-base: 1rem/1.75rem var(--font-family);
  --text-sm: 1rem/1.5rem var(--font-family);
  --text-xs:  .875rem/1.5rem var(--font-family);

  /** css font smoothing **/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  box-sizing: border-box;
  margin: 0;
}

*:where(:focus:not(:focus-visible)) {
  outline:none;
}
*:where(:focus-visible) {
  outline: .125rem solid;
  outline-offset: .125rem;
}
a {
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: .125rem;
  color: #000;
}
/* lists - override tailwind 'list-disc' utility */
ul.list-disc {
  list-style: initial;
  list-style-position: inside;
}
ul.list-disc li + li {
  margin-top: .25rem;
}
ul.list-disc li::marker {
  content: ' ';
}
ul.list-disc li::before {
  background-color: var(--black);
  border-radius: .375rem;
  content: '';
  display: inline-block;
  height: .25rem;
  vertical-align: middle;
  width: .5rem;
  margin-right: .5rem;
}

/* animations */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeIn {
    from { 
      opacity: 0;
      transform: translateY(1rem);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }
  .js-fade-in {
    opacity: 0;
  }
  [data-visible] .js-fade-in,
  .fade-in-immediate {
    animation-name: fadeIn;
    animation-duration: var(--animation-duration, 1.2s);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .fade-in-immediate {
    opacity: 0;
    animation-delay: var(--animation-delay, 0.2s)
  }

  @keyframes pulseIn {
    from { 
      opacity: 0.5;
      transform: scale(1.1);
    }
    to { 
      opacity: 1.0;
      transform: scale(1.0);
    }
  }
  [data-visible] .pulse-in {
    animation-name: pulseIn;
    animation-delay: 0s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* 
    slide in
    —
    restrict by screen size w/ media query so that
    this only happens at larger screen sizes...
    smaller screen sizes (e.g. mobile) do not have enough
    horizontal real-estate for it to really work.

    48em = 768px
  */
  @media screen and (min-width: 48em) {
    .js-slide-in-left { --slideDistance: -2rem; }
    .js-slide-in-right { --slideDistance: 2rem; }
    .js-slide-in-left, .js-slide-in-right {
      transform: translateX(var(--slideDistance));
      transition: all 0.6s ease;
      transition-property: transform, opacity;
      opacity: 0.5;
      will-change: transform, opacity;
    }
    [data-visible] .js-slide-in-left, [data-visible] .js-slide-in-right {
      transform: translateX(0);
      opacity: 1.0;
    }
  }
}

.Button {
  --button-bg-color: var(--black);
  --button-text-color: var(--white);
  --button-curtain-bg-color: var(--brand);
  --button-curtain-text-color: var(--white);
  outline-color: var(--button-bg-color);
}
.Button--white {
  --button-bg-color: var(--white);
  --button-text-color: var(--brand);
  --button-curtain-bg-color: var(--secondary);
  --button-curtain-text-color: var(--white);
}
.Button--blue,
.Button--default {
  --button-bg-color: var(--brand);
  --button-text-color: var(--white);
  --button-curtain-bg-color: var(--navy);
  --button-curtain-text-color: var(--white);
}
.Button--white.Button--secondary {
  --button-text-color: var(--white);
  --button-curtain-bg-color: var(--secondary);
}
.Button--secondary {
  --button-text-color: var(--brand);
  --button-curtain-bg-color: var(--blue);
}

.Button__text {
  color: var(--button-text-color);
  background-color: var(--button-bg-color);
}
.Button--secondary .Button__text {
  background: transparent;
}
.Button--secondary,
.Button--secondary .Button__curtain {
  box-shadow: inset 0 0 0 1px var(--button-bg-color);
}
.Button__curtain {
  color: var(--button-curtain-text-color);
  background-color: var(--button-curtain-bg-color);
}
.Button__curtain {
  clip-path: inset(100% 0% 0% 0% round 1rem 0 0); /* top left bottom right */
  transition: .375s clip-path;
  /* transform: scale3d(1.006, 1, 1); */
}
.Button__curtain:before {
   content: attr(data-text);
}
:hover > .Button__curtain {
  clip-path: inset(0.3125rem 0% 0% 0% round 1rem 0 0);
}