@layer properties, theme, base, defaults, lib, undo, layout, components, utilities, overrides;

/* @layer properties, base, theme and utilities set by tailwindcss */

@font-face {
  font-family: IntegralCF;
  font-weight: 400;
  src: url("/assets/IntegralCF-Regular-1c4ecc32.woff2");
}

@font-face {
  font-family: IntegralCF;
  font-weight: 500;
  src: url("/assets/IntegralCF-Medium-91f74b87.woff2");
}

@font-face {
  font-family: IntegralCF;
  font-weight: 700;
  src: url("/assets/IntegralCF-Bold-78af10a3.woff2");
}

@layer defaults {
  :root {
    --block-space: 1rem;
    --block-space-half: calc(var(--block-space) / 2);
    --block-space-double: calc(var(--block-space) * 2);
    --inline-space: var(--block-space);
    --inline-space-half: calc(var(--inline-space) / 2);
    --inline-space-double: calc(var(--inline-space) * 2);

    --font-header: "IntegralCF", sans-serif;
    --font-button: var(--font-header);

    --text-box-font-header: trim-both ex alphabetic;

    --text-small: 0.9rem;

    --text-base: 1rem;
    --text-large: 1.125rem;
    --text-x-large: 1.25rem;
    --text-xx-large: 1.5rem;
    --text-xxx-large: 2.25rem;
    --text-huge: 3.75rem;
    --text-x-huge: 6rem;

    --text-base-resp: clamp(var(--text-base), 6vw, var(--text-x-large));
    --text-large-resp: clamp(var(--text-large), 6vw, var(--text-xx-large));
    --text-x-large-resp: clamp(var(--text-x-large), 6vw, var(--text-xxx-large));
    --text-xx-large-resp: clamp(var(--text-xx-large), 8vw, var(--text-huge));
    --text-xxx-large-resp: clamp(var(--text-xxx-large), 16vw, var(--text-x-huge));

    /* 1 at 40rem wide, 2 at 96rem wide */
    --block-space-responsive: calc((25vw + 4rem) / 14);
    --responsive: calc((25vw + 4rem) / 14rem);

    /* --text-xx-large: clamp(2.25rem, 8vw, 6rem); */
    /* --text-x-large: calc(var(--text-xx-large) * 0.6); */
    /* --text-large: calc(var(--text-xx-large) * 0.4); */
    /* --block-space-responsive: calc(var(--text-xx-large) * 0.2); */

    --radius: 20px;
    --radius-sm: 14px;

    --border: 1px solid var(--color-ink-weaker);

    --blur-xs: 2px;
    --blur-sm: 7px;
    --blur: 2.5rem;
    --blur-lg: 4rem;
    --backdrop-blur-xs: blur(var(--blur-xs));
    --backdrop-blur-sm: blur(var(--blur-sm));
    --backdrop-blur: blur(var(--blur));
    --backdrop-blur-lg: blur(var(--blur-lg));

    --lch-black: 0% 0 0;

    --lightsource: oklch(100% 0 0 / 8%);
    --lightsource-strong: oklch(100% 0 0 / 18%);
    --light-top: inset 0 1px var(--lightsource);
    --light-bottom: inset 0 -1px var(--lightsource-strong);
    --shadow:
      0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 60%),
      0 0.4em 0.8em -1.2em oklch(var(--lch-black) / 80%),
      0 0.8em 1.0em -1.4em oklch(var(--lch-black) / 90%),
      0 1.2em 1.6em -2em oklch(var(--lch-black) / 100%);
    --shadow-lit: var(--light-top), var(--shadow);

    --noise: url("/assets/noise-18882b16.svg") 0 / 500px repeat;
  }
}

/* breakpoints */

/* sm - 40rem */
/* md - 48rem */
/* lg - 64rem */
/* xl - 80rem */
/* 2xl - 96rem */