@import "tailwindcss";

@theme {
  --color-bg-dark: hsl(109, 20%, 90%);
  --color-bg: hsl(109, 20%, 98%);
  --color-bg-light: hsl(109, 20%, 100%);

  --color-text: hsl(109, 0%, 5%);
  --color-text-muted: hsl(109, 0%, 38%);

  --color-primary: hsl(109, 50%, 77%);
  --color-primary-surface: hsla(109, 50%, 77%, 0.3);
  --color-primary-text: hsl(109, 50%, 19%);

  --color-heatmap-8: hsla(109, 50%, 77%, 1);
  --color-heatmap-4: hsla(109, 50%, 77%, 0.8);
  --color-heatmap-2: hsla(109, 50%, 77%, 0.6);
  --color-heatmap-0: hsla(109, 50%, 77%, 0.4);

  --color-secondary: hsl(300, 50%, 74%);
  --color-secondary-surface: hsla(300, 50%, 74%, 0.3);
  --color-secondary-text: hsl(300, 50%, 19%);

  --color-streak: hsl(20, 60%, 72%);
  --color-streak-surface: hsla(20, 60%, 72%, 0.3);
  --color-streak-text: hsl(20, 60%, 19%);

  --color-gray: hsl(109, 0%, 70%);
  --color-gray-light: hsla(109, 0%, 70%, 0.1);

  --color-blue: hsl(195, 50%, 77%);
  --color-blue-surface: hsla(195, 50%, 77%, 0.3);
  --color-blue-text: hsl(195, 50%, 19%);

  --color-toast-success: hsl(109, 50%, 77%);
  --color-toast-info: hsl(195, 50%, 77%);
  --color-toast-error: hsl(0, 91%, 77%);
}

@utility card {
  display: flex;
  flex-direction: column;
  gap: theme(gap.3);
  background-color: theme(--color-bg-light);
  border-radius: theme(borderRadius.md);
  filter: drop-shadow(theme(dropShadow.md));
  width: 100%;
  padding: theme(spacing.6);
}

@utility error {
  padding: theme(spacing.2);
  margin: theme(spacing.2) theme(spacing.0);
  border-radius: theme(borderRadius.md);
  border-width: 1px;
  border-color: theme(colors.red.500);
  color: theme(colors.red.500);
  font-size: theme(text.sm);
}

@utility pill {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: theme(spacing.1) theme(spacing.4);
  border-radius: theme(borderRadius.full);
  font-size: theme(text.sm);
  filter: drop-shadow(theme(dropShadow.sm));
}

@utility pill-primary {
  background-color: theme(--color-primary-surface);
  color: theme(--color-primary-text);
}

@utility pill-secondary {
  background-color: theme(--color-secondary-surface);
  color: theme(--color-secondary-text);
}

@utility pill-streak {
  background-color: theme(--color-streak-surface);
  color: theme(--color-streak-text);
}

@utility pill-muted {
  border-color: theme(--color-bg-dark);
  border-width: 1px;
  background-color: theme(--color-bg);
  color: theme(--color-text-muted);
}

@utility percentage-bar {
  height: theme(spacing.2);
  border-radius: theme(borderRadius.md);
  background-color: theme(--color-bg-dark);
}

@utility input {
  padding: theme(spacing.2) theme(spacing.4);
  border-radius: theme(borderRadius.md);
  border-width: 1px;
  border-color: theme(--color-bg-dark);
  background-color: theme(--color-bg-light);
  font-size: theme(text.sm);
  color: theme(--color-text);

  @variant placeholder {
    color: theme(--color-text-muted);
    opacity: 1;
  }
}

@utility btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: theme(gap.2);
  cursor: pointer;
  padding: theme(spacing.2) theme(spacing.4);
  width: 100%;
  color: theme(--color-text);
  font-weight: theme(fontWeight.medium);

  img {
    transition: all 150ms ease-in-out;
  }

  @variant disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  @screen sm {
    width: fit-content;
  }
}

@utility btn-primary {
  border-radius: theme(borderRadius.md);
  background-color: theme(--color-primary);

  @variant hover {
    background-color: theme(--color-primary-surface);
  }
}

@utility btn-secondary {
  border-radius: theme(borderRadius.md);
  border-width: 1px;
  border-color: theme(--color-bg-dark);
  background-color: theme(--color-bg-light);

  @variant hover {
    background-color: theme(--color-bg);
  }
}

@utility btn-dangerous {
  border-radius: theme(borderRadius.md);
  border-width: 1px;
  border-color: theme(colors.red.300);
  color: theme(colors.red.600);

  @variant hover {
    background-color: theme(colors.red.50);
    border-color: theme(colors.red.400);
  }
}

@utility btn-muted {
  border-radius: theme(borderRadius.md);
  border-color: theme(--color-bg-dark);
  background-color: theme(--color-bg);
  border-width: 1px;
  color: theme(--color-text-muted);

  @variant hover {
    opacity: 75%;
  }
}

[x-cloak] { display: none !important; }

body {
  font-family: "Twemoji Country Flags", var(--default-font-family);
}