@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  /* Brand charcoal — #131312 scale */
  --color-brand-50:  #f2f2f2;
  --color-brand-100: #e0e0df;
  --color-brand-200: #c2c2c1;
  --color-brand-300: #a3a3a2;
  --color-brand-400: #858584;
  --color-brand-500: #666665;
  --color-brand-600: #4d4d4c;
  --color-brand-700: #333332;
  --color-brand-800: #1e1e1d;
  --color-brand-900: #131312;
  --color-brand-950: #0a0a09;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  color: #111827;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%236b7280' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 0.85rem;
}

select option {
  color: #111827;
  background-color: #ffffff;
}