/* Import Inter Tight from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import "tailwindcss";

/* JustSayin Design System - See /docs/design-system.md for full documentation */
@theme {
  /* Typography - Inter Tight as default sans font */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Base Colors */
  --color-primary: #222222;
  --color-secondary: #666666;
  --color-accent: #FA5D29;
  --color-background: #e9e9e9;
  --color-surface-1: #f9f9f9;
  --color-surface-2: #fdfdfd;
  --color-border: #d4d4d4;
}

/* Custom Select Dropdown Styling */
/* Hide default arrow and add custom SVG chevron arrow with proper spacing */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem; /* Space for custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center; /* 12px from right edge, vertically centered */
  background-size: 14px 14px;
  cursor: pointer;
}

/* Number field styling */
input[type="number"] {
  cursor: pointer;
}