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

@layer base {
  @font-face {
    font-family: 'LuoHei VF';
    src: url('@/assets/LuoHeiVF.woff2') format('woff2');
  }

  body {
    @apply bg-light text-base text-white transition-colors dark:bg-dark dark:text-light;
    --font-variation-normal: 'XWGT' 250, 'YWGT' 500;
    --font-variation-bold: 'XWGT' 400, 'YWGT' 800;
    font-family: 'LuoHei VF';
    font-variation-settings: var(--font-variation-normal);
  }

  .dark body {
    --font-variation-normal: 'XWGT' 225, 'YWGT' 475;
    --font-variation-bold: 'XWGT' 375, 'YWGT' 775;
  }

  a {
    @apply transition-[font-variation-settings];
  }

  a:hover,
  a:active {
    @apply font-bold;
  }

  button,
  label[for^='checkbox'],
  label[for^='radio'],
  label[data-reset] {
    @apply cursor-pointer select-none transition-[font-variation-settings] pointer:hover:font-bold;
  }

  button {
    font: inherit;
  }
}

@layer utilities {
  .font-optical-size-sm {
    --font-variation-normal: 'XWGT' 300, 'YWGT' 600;
    --font-variation-bold: 'XWGT' 450, 'YWGT' 900;
    font-variation-settings: var(--font-variation-normal);
  }

  .font-optical-size-lg {
    --font-variation-normal: 'XWGT' 200, 'YWGT' 400;
    --font-variation-bold: 'XWGT' 400, 'YWGT' 800;
    font-variation-settings: var(--font-variation-normal);
  }

  .font-optical-size-noordzij {
    --font-variation-normal: 'XWGT' 450, 'YWGT' 500;
    --font-variation-bold: 'XWGT' 200, 'YWGT' 800;
    font-variation-settings: var(--font-variation-normal);
  }

  .dark .font-optical-size-sm {
    --font-variation-normal: 'XWGT' 275, 'YWGT' 575;
    --font-variation-bold: 'XWGT' 425, 'YWGT' 875;
  }

  .dark .font-optical-size-lg {
    --font-variation-normal: 'XWGT' 175, 'YWGT' 375;
    --font-variation-bold: 'XWGT' 375, 'YWGT' 775;
  }

  .dark .font-optical-size-noordzij {
    --font-variation-normal: 'XWGT' 425, 'YWGT' 475;
    --font-variation-bold: 'XWGT' 175, 'YWGT' 775;
  }

  .font-normal {
    font-variation-settings: var(--font-variation-normal);
  }

  .font-bold {
    font-variation-settings: var(--font-variation-bold);
  }

  .tracking {
    @apply -mr-[0.25em] tracking-[0.25em];
  }

  .no-break {
    @apply whitespace-nowrap break-keep;
  }

  .hyphens-auto {
    hyphens: auto;
  }

  .cjk-latin-glue,
  .latin-cjk-glue {
    letter-spacing: calc(1em / 6);
  }
}
