@import "tailwindcss";

@theme {
  --color-background-dark: oklch(from var(--color-violet-950) 24% 0.08 h);

  --link-bg-l: 53.5%;
  --hover-darken: 0.05;

  --color-fur-affinity: oklch(from #353b45 var(--link-bg-l) c h);
  --color-fur-affinity-hover: oklch(
    from var(--color-fur-affinity) calc(l - var(--hover-darken)) c h
  );

  --color-github: #1f2328;
  --color-github-hover: oklch(
    from var(--color-github) calc(l - var(--hover-darken)) c h
  );

  --color-keyoxide: #6855c3;
  --color-keyoxide-hover: oklch(
    from var(--color-keyoxide) calc(l - var(--hover-darken)) c h
  );

  --color-mastodon: oklch(from #6364ff var(--link-bg-l) c h);
  --color-mastodon-hover: oklch(
    from var(--color-mastodon) calc(l - var(--hover-darken)) c h
  );

  --color-matrix: oklch(from #0dbd8b var(--link-bg-l) c h);
  --color-matrix-hover: oklch(
    from var(--color-matrix) calc(l - var(--hover-darken)) c h
  );
}

@layer base {
  body {
    @apply dark:bg-background-dark bg-neutral-50 text-black dark:text-white;
  }

  h1 {
    @apply text-5xl font-bold;
  }
}

@layer components {
  .link-fur-affinity {
    @apply bg-fur-affinity hover:bg-fur-affinity-hover text-white;
  }

  .link-github {
    @apply bg-github hover:bg-github-hover text-white;
  }

  .link-keyoxide {
    @apply bg-keyoxide hover:bg-keyoxide-hover text-white;
  }

  .link-mastodon {
    @apply bg-mastodon hover:bg-mastodon-hover text-white;
  }

  .link-matrix {
    @apply bg-matrix hover:bg-matrix-hover text-white;
  }
}

@layer utilities {
  .text-soft {
    @apply text-zinc-600 dark:text-zinc-400;
  }
}