@import "tailwindcss";

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

@font-face {
    font-family: "AtkinsonHyperlegible";
    src: url("/fonts/AtkinsonHyperlegibleNext.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AtkinsonHyperlegible";
    src: url("/fonts/AtkinsonHyperlegibleNext.ttf") format("truetype");
    font-weight: light;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AtkinsonHyperlegible";
    src: url("/fonts/AtkinsonHyperlegibleNext-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* light mode */
:root {
    --foreground: #5c6a72;
    --red: #f85552;
    --orange: #f57d26;
    --yellow: #dfa000;
    --green: #8da101;
    --blue: #3a94c5;
    --aqua: #35a77c;
    --purple: #df69ba;
    --background-dim: #e5dfc5;
    --background-0: #f3ead3;
    --background-1: #eae4ca;
    --background-2: #e5dfc5;
    --background-3: #ddd8be;
    --background-4: #d8d3ba;
    --background-5: #b9c0ab;
    --background-red: #f4dbd0;
    --background-visual: #e1e4bd;
    --background-yellow: #f1e4c5;
    --background-green: #e5e6c5;
    --background-blue: #e1e7dd;
    --gray-0: #a6b0a0;
    --gray-1: #939f91;
    --gray-2: #829181;
}

/* dark mode */
.dark {
    --foreground: #d3c6aa;
    --red: #e67e80;
    --orange: #e69875;
    --yellow: #dbbc7f;
    --green: #a7c080;
    --blue: #7fbbb3;
    --aqua: #83c092;
    --purple: #d699b6;
    --background-dim: #293136;
    --background-0: #333c43;
    --background-1: #3a464c;
    --background-2: #434f55;
    --background-3: #4d5960;
    --background-4: #555f66;
    --background-5: #5d6b66;
    --background-red: #5c3f4f;
    --background-visual: #59464c;
    --background-yellow: #55544a;
    --background-green: #48584e;
    --background-blue: #3f5865;
    --gray-0: #7a8478;
    --gray-1: #859289;
    --gray-2: #9da9a0;
}

@theme inline {
    --color-foreground: var(--foreground);
    --color-red: var(--red);
    --color-orange: var(--orange);
    --color-yellow: var(--yellow);
    --color-green: var(--green);
    --color-blue: var(--blue);
    --color-aqua: var(--aqua);
    --color-purple: var(--purple);
    --color-bg-dim: var(--background-dim);
    --color-bg-0: var(--background-0);
    --color-bg-1: var(--background-1);
    --color-bg-2: var(--background-2);
    --color-bg-3: var(--background-3);
    --color-bg-4: var(--background-4);
    --color-bg-5: var(--background-5);
    --color-bg-red: var(--background-red);
    --color-bg-visual: var(--background-visual);
    --color-bg-yellow: var(--background-yellow);
    --color-bg-green: var(--background-green);
    --color-bg-blue: var(--background-blue);
    --color-gray-0: var(--gray-0);
    --color-gray-1: var(--gray-1);
    --color-gray-2: var(--gray-2);
    --font-sans: "AtkinsonHyperlegible", sans-serif;
}

body {
    background-color: var(--color-bg-0);
    color: var(--color-foreground);
    font-weight: 300;
}

.animated-link {
    @apply hover:scale-105 transition-all ease-in-out duration-300
}

.link {
    @apply hover:cursor-pointer text-blue
}

.skeleton {
  @apply rounded-md animate-pulse bg-gray-0/30
}

.surface {
  @apply bg-gray-2/10 border border-solid rounded-lg p-4
}