@import "tailwindcss";

@theme {
  --color-brand: #d63333;
  --color-brand-shadow: #481111;
  --color-codeberg: #2185d0;
  --color-github-sponsors: #cba6f7;
  --color-gitlab: #fc6d26;
  --color-ko-fi: #29abe0;
  --color-liberapay: #f6c915;
  --color-linkedin: #0a66c2;
  --color-mastodon: #6364ff;
  --color-paypal: #003087;
  --color-signal: #3a76f0;

  --shadow-md: 0 5px 30px rgba(0, 0, 0, 0.25);

  --font-display:
    "Josefin Sans", "Fira Sans", "Helvetica Neue", "Segoe UI", "sans-serif";
  --font-body: "Fira Sans", "Helvetica Neue", "Segoe UI", "sans-serif";
}

@layer components {
  .flat-shadow {
    @apply relative;
    @apply before:absolute after:absolute;

    @apply after:top-full;
    @apply before:top-0;

    @apply after:left-0;
    @apply before:left-full;

    @apply after:h-64;
    @apply before:h-full;

    @apply after:w-full;
    @apply before:w-64;

    @apply after:skew-x-[45deg];
    @apply before:skew-y-[45deg];
    @apply before:origin-[0_0] after:origin-[0_0];

    @apply after:bg-gradient-to-b;
    @apply before:bg-gradient-to-r;
    @apply before:from-brand-shadow after:from-brand-shadow before:to-transparent after:to-transparent;
  }
}