app/tailwind.css
@import "tailwindcss";
@import "open-props/style";

@theme {
  --default-font-family: var(--font-sans);

  --font-size-*: initial;
  --font-size-00: var(--font-size-00);
  --font-size-0: var(--font-size-0);
  --font-size-1: var(--font-size-1);
  --font-size-2: var(--font-size-2);
  --font-size-3: var(--font-size-3);
  --font-size-4: var(--font-size-4);
  --font-size-5: var(--font-size-5);
  --font-size-6: var(--font-size-6);
  --font-size-7: var(--font-size-7);
  --font-size-8: var(--font-size-8);

  --shadow-*: initial;
  --shadow-1: var(--shadow-1);
  --shadow-2: var(--shadow-2);
  --shadow-3: var(--shadow-3);
  --shadow-4: var(--shadow-4);
  --shadow-5: var(--shadow-5);
  --shadow-6: var(--shadow-6);

  --inset-shadow-*: initial;
  --inset-shadow-1: var(--inner-shadow-1);
  --inset-shadow-2: var(--inner-shadow-2);
  --inset-shadow-3: var(--inner-shadow-3);
  --inset-shadow-4: var(--inner-shadow-4);
  --inset-shadow-5: var(--inner-shadow-5);

  --transition-timing-function-*: initial;
  --transition-timing-function-1: var(--ease-1);
  --transition-timing-function-2: var(--ease-2);
  --transition-timing-function-3: var(--ease-3);
  --transition-timing-function-4: var(--ease-4);
  --transition-timing-function-5: var(--ease-5);
  --transition-timing-function-in-1: var(--ease-in-1);
  --transition-timing-function-in-2: var(--ease-in-2);
  --transition-timing-function-in-3: var(--ease-in-3);
  --transition-timing-function-in-4: var(--ease-in-4);
  --transition-timing-function-in-5: var(--ease-in-5);
  --transition-timing-function-out-1: var(--ease-out-1);
  --transition-timing-function-out-2: var(--ease-out-2);
  --transition-timing-function-out-3: var(--ease-out-3);
  --transition-timing-function-out-4: var(--ease-out-4);
  --transition-timing-function-out-5: var(--ease-out-5);
  --transition-timing-function-in-out-1: var(--ease-in-out-1);
  --transition-timing-function-in-out-2: var(--ease-in-out-2);
  --transition-timing-function-in-out-3: var(--ease-in-out-3);
  --transition-timing-function-in-out-4: var(--ease-in-out-4);
  --transition-timing-function-in-out-5: var(--ease-in-out-5);
  --transition-timing-function-elastic-out-1: var(--ease-elastic-out-1);
  --transition-timing-function-elastic-out-2: var(--ease-elastic-out-2);
  --transition-timing-function-elastic-out-3: var(--ease-elastic-out-3);
  --transition-timing-function-elastic-out-4: var(--ease-elastic-out-4);
  --transition-timing-function-elastic-out-5: var(--ease-elastic-out-5);
  --transition-timing-function-elastic-in-1: var(--ease-elastic-in-1);
  --transition-timing-function-elastic-in-2: var(--ease-elastic-in-2);
  --transition-timing-function-elastic-in-3: var(--ease-elastic-in-3);
  --transition-timing-function-elastic-in-4: var(--ease-elastic-in-4);
  --transition-timing-function-elastic-in-5: var(--ease-elastic-in-5);
  --transition-timing-function-elastic-in-out-1: var(--ease-elastic-in-out-1);
  --transition-timing-function-elastic-in-out-2: var(--ease-elastic-in-out-2);
  --transition-timing-function-elastic-in-out-3: var(--ease-elastic-in-out-3);
  --transition-timing-function-elastic-in-out-4: var(--ease-elastic-in-out-4);
  --transition-timing-function-elastic-in-out-5: var(--ease-elastic-in-out-5);
  --transition-timing-function-step-1: var(--ease-step-1);
  --transition-timing-function-step-2: var(--ease-step-2);
  --transition-timing-function-step-3: var(--ease-step-3);
  --transition-timing-function-step-4: var(--ease-step-4);
  --transition-timing-function-step-5: var(--ease-step-5);
  --transition-timing-function-spring-1: var(--ease-spring-1);
  --transition-timing-function-spring-2: var(--ease-spring-2);
  --transition-timing-function-spring-3: var(--ease-spring-3);
  --transition-timing-function-spring-4: var(--ease-spring-4);
  --transition-timing-function-spring-5: var(--ease-spring-5);
  --transition-timing-function-bounce-1: var(--ease-bounce-1);
  --transition-timing-function-bounce-2: var(--ease-bounce-2);
  --transition-timing-function-bounce-3: var(--ease-bounce-3);
  --transition-timing-function-bounce-4: var(--ease-bounce-4);
  --transition-timing-function-bounce-5: var(--ease-bounce-5);

  /* custom open props content sizes */
  --width-content-1: var(--size-content-1);
  --width-content-2: var(--size-content-2);
  --width-content-3: var(--size-content-3);
  --width-header-1: var(--size-header-1);
  --width-header-2: var(--size-header-2);
  --width-header-3: var(--size-header-3);

  /* custom adaptive (light/dark) prop utilities */
  --color-ink-1: var(--ink-1);
  --color-ink-2: var(--ink-2);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-link: var(--link);

  /* gradients */
  --background-image-gradient-1: var(--gradient-1);
  --background-image-gradient-2: var(--gradient-2);
  --background-image-gradient-3: var(--gradient-3);
  --background-image-gradient-4: var(--gradient-4);
  --background-image-gradient-5: var(--gradient-5);
  --background-image-gradient-6: var(--gradient-6);
  --background-image-gradient-7: var(--gradient-7);
  --background-image-gradient-8: var(--gradient-8);
  --background-image-gradient-9: var(--gradient-9);
  --background-image-gradient-10: var(--gradient-10);
  --background-image-gradient-11: var(--gradient-11);
  --background-image-gradient-12: var(--gradient-12);
  --background-image-gradient-13: var(--gradient-13);
  --background-image-gradient-14: var(--gradient-14);
  --background-image-gradient-15: var(--gradient-15);
  --background-image-gradient-16: var(--gradient-16);
  --background-image-gradient-17: var(--gradient-17);
  --background-image-gradient-18: var(--gradient-18);
  --background-image-gradient-19: var(--gradient-19);
  --background-image-gradient-20: var(--gradient-20);
  --background-image-gradient-21: var(--gradient-21);
  --background-image-gradient-22: var(--gradient-22);
  --background-image-gradient-23: var(--gradient-23);
  --background-image-gradient-24: var(--gradient-24);
  --background-image-gradient-25: var(--gradient-25);
  --background-image-gradient-26: var(--gradient-26);
  --background-image-gradient-27: var(--gradient-27);
  --background-image-gradient-28: var(--gradient-28);
  --background-image-gradient-29: var(--gradient-29);
  --background-image-gradient-30: var(--gradient-30);
}

:root {
  --ink-1: var(--gray-9);
  --ink-2: var(--gray-7);
  --surface-1: var(--gray-2);
  --surface-2: var(--gray-1);
  --link: var(--indigo-6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink-1: var(--gray-1);
    --ink-2: var(--gray-5);
    --surface-1: var(--gray-11);
    --surface-2: var(--gray-10);
    --link: var(--indigo-4);
  }
}
