@import "tailwindcss";
@plugin "@tailwindcss/typography";
@source "./app/**/*.{js,ts,jsx,tsx,mdx}";
@source "./components/**/*.{js,ts,jsx,tsx,mdx}";
@source "./hooks/**/*.{js,ts,jsx,tsx,mdx}";

@theme {
  --color-lightbg: oklch(0.945 0.006 252); /* Light Background */
  --color-lighttext: oklch(0.2771 0.03774 261.549988); /* Light Text */
  --color-lightsec: oklch(0.5564 0.04004 259.779999); /* Light Secondary */

  --color-darkbg: oklch(0.30012 0.02171 262.519989); /* Dark Background */
  --color-darktext: oklch(0.9355 0.0017 247.839996); /* Dark Text */
  --color-darksec: oklch(0.7829 0.04004 259.779999); /* Dark Secondary */

  --color-trptkblue: oklch(0.46077 0.13464 260.109985);

  /* Solid border/line colours – pre-blended current-on-bg */
  --color-lightline: oklch(0.88 0.007 254.68); /* 5 % */
  --color-lightline-mid: oklch(0.85 0.008 256.37); /* 10 % */
  --color-lightline-strong: oklch(0.819 0.012 257.33); /* 20 % (lightsec on lightbg) */
  --color-lightline-hover: oklch(0.759 0.013 259.04); /* 25 % */
  --color-lightline-focus: oklch(0.601 0.02 260.8); /* 50 % */

  --color-darkline: oklch(0.342 0.022 262.51); /* 5 % */
  --color-darkline-mid: oklch(0.377 0.021 262.47); /* 10 % */
  --color-darkline-strong: oklch(0.412 0.028 261.53); /* 20 % (darksec on darkbg) */
  --color-darkline-hover: oklch(0.482 0.017 262.22); /* 25 % */
  --color-darkline-focus: oklch(0.644 0.011 261.36); /* 50 % */
  --font-argesta: var(--font-argesta-face), ui-serif, serif;
  --font-silka: var(--font-silka-face), ui-sans-serif, sans-serif;
  --font-silkasb: var(--font-silkasb-face), ui-sans-serif, sans-serif;
}

.break-words {
  text-wrap: balance;
  hyphens: auto;
}

.no-ring {
  @apply focus:ring-0 focus:ring-offset-0 focus:outline-none;
}

.release-blur::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background-image: var(--cover-url);
  background-size: cover;
  background-position: center;

  filter: blur(44px) saturate(1.5) brightness(1.2);
  mix-blend-mode: normal;

  opacity: 0;

  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.release-blur.loaded::before {
  animation: releaseBlurFadeIn 2s ease-in-out forwards;
}

:root .release-blur::before {
  mix-blend-mode: normal;
}

.dark .release-blur::before {
  mix-blend-mode: screen;
}

@keyframes releaseBlurFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.15;
  }
}

.dark .release-blur.loaded::before {
  animation: releaseBlurFadeInDark 2s ease-in-out forwards;
}

@keyframes releaseBlurFadeInDark {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.15;
  }
}

@custom-variant dark (&:where(.dark, .dark *));

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}