@import "tailwindcss";

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

:root {
  color-scheme: dark;
  --background: #09090b;
  --foreground: #f4f4f5;
  --brand-green: #459355;
  --brand-green-hover: #3c814a;
  --brand-green-active: #347141;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: -apple-system, BlinkMacSystemFont, var(--font-inter), "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

html.light {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #171717;
}

html.dark {
  color-scheme: dark;
  --background: #09090b;
  --foreground: #f4f4f5;
}

html {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, var(--font-inter), "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
  word-break: break-word;
}

.form-select-brand {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5L10 12L14.5 7.5' stroke='%2352525B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

.dark .form-select-brand {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7.5L10 12L14.5 7.5' stroke='%23A1A1AA' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-select-brand option:checked {
  background-color: var(--brand-green);
  color: white;
}

.form-select-placeholder:has(option:checked[value=""]) {
  color: #71717a;
}

.dark .form-select-placeholder:has(option:checked[value=""]) {
  color: #a1a1aa;
}

.form-select-placeholder[data-placeholder-selected="true"] {
  color: #71717a;
}

.dark .form-select-placeholder[data-placeholder-selected="true"] {
  color: #a1a1aa;
}

.form-select-placeholder option {
  background-color: white;
  color: #18181b;
}

.dark .form-select-placeholder option {
  background-color: #09090b;
  color: #f4f4f5;
}

.app-main-typography main {
  font-size: 0.875rem;
  line-height: 1.5;
}

.app-main-typography main .text-base {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.app-main-typography main .text-lg {
  font-size: 1rem;
  line-height: 1.5rem;
}

.app-main-typography main .text-xl {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.app-main-typography main .text-2xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}