/**
 * Graici Brand Colors - MVP
 * 
 * Simple CSS variables for consistent branding.
 * Use var(--graici-*) in your styles or inline.
 */

:root {
  /* Brand Colors */
  --graici-text: #232C27;
  --graici-primary: #2F4858;
  --graici-secondary: #497D7E;
  --graici-white: #FFFFFF;
  --graici-border: #DCDCDC;
  --graici-gold: #A4872E;
  
  /* Background Colors */
  --graici-page-bg: #EDF2EC;
  --graici-light-bg: #F8F9F9;
  
  /* Text Colors */
  --graici-secondary-text: #6B7280;
  --graici-placeholder: #9CA3AF;
  
  /* Hover States */
  --graici-secondary-hover: #3D6B6C;
  
  /* Typography */
  --main-fontFamily-primary: 'Jost', sans-serif;
}

/* Global Font Family */
* {
  font-family: var(--main-fontFamily-primary, 'Jost', sans-serif);
}

body {
  font-family: var(--main-fontFamily-primary, 'Jost', sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.graici-place-autocomplete {
  background-color: var(--graici-white) !important;
  color: var(--graici-text) !important;
  color-scheme: light !important;
  font-family: var(--main-fontFamily-primary, 'Jost', sans-serif);
  -webkit-text-fill-color: var(--graici-text) !important;
}

.graici-place-autocomplete::part(input) {
  background-color: transparent !important;
  color: var(--graici-text) !important;
  -webkit-text-fill-color: var(--graici-text) !important;
  caret-color: var(--graici-text) !important;
}

.graici-place-autocomplete::part(prediction-list) {
  background-color: var(--graici-white) !important;
  color: var(--graici-text) !important;
}

.graici-place-autocomplete::part(prediction-item) {
  color: var(--graici-secondary-text) !important;
}

.graici-place-autocomplete::part(prediction-item-main-text),
.graici-place-autocomplete::part(prediction-item-match) {
  color: var(--graici-text) !important;
}

.graici-place-autocomplete::part(prediction-item-selected) {
  background-color: var(--graici-light-bg) !important;
  color: var(--graici-text) !important;
}

/* App container - centered 500px content on all screens */
.app-container {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}