campaign-site/styles/globals.css

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

@layer base {
  :root {
    --monero: 24 100% 50%;
    --firo: 351 69% 36%;
    --privacyguides: 40 100% 50%;
    --general: 220 86% 58%;
  }

  .monero {
    --background: 24 100% 95%;
    --foreground: 223 84% 5%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: var(--monero);
    --primary-foreground: 0 0% 100%;
    --primary-hover: 24 100% 45%;

    --muted: 214.3 31.8% 87%;
    --muted-foreground: 218 11% 65%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 87%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .firo {
    --background: 351 30% 95%;
    --foreground: 223 84% 5%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: var(--firo);
    --primary-foreground: 0 0% 100%;
    --primary-hover: 351 69% 26%;

    --muted: 214.3 31.8% 87%;
    --muted-foreground: 218 11% 65%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 87%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .privacyguides {
    --background: 40 100% 95;
    --foreground: 223 84% 5%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: var(--privacyguides);
    --primary-foreground: 0 0% 100%;
    --primary-hover: 40 100% 62%;

    --muted: 214.3 31.8% 87%;
    --muted-foreground: 218 11% 65%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 87%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .general {
    --background: 220 100% 95%;
    --foreground: 223 84% 5%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: var(--general);
    --primary-foreground: 0 0% 100%;
    --primary-hover: 220 86% 48%;

    --muted: 214.3 31.8% 87%;
    --muted-foreground: 218 11% 65%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 87%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
}

body {
  background-color: hsl(var(--background));
}

.task-list-item::before {
  @apply hidden;
}

.task-list-item {
  @apply list-none;
}

.footnotes {
  @apply mt-12 border-t border-gray-200 pt-8;
}

.data-footnote-backref {
  @apply no-underline;
}

.csl-entry {
  @apply my-5;
}

/* https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  transition:
    background-color 600000s 0s,
    color 600000s 0s;
}

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
}

.prose > ul > li > p {
  margin-top: 0;
  margin-bottom: 0;
}

.prose small {
  @apply leading-normal;
}

form label {
  @apply text-sm font-semibold leading-normal;
}

.checkbox {
  @apply flex items-center;
}

form input[type='text'],
form textarea {
  @apply mt-2;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}