/* HomeOffer Design System — applied to reductions-panel.
 * Primary action = Alpha-60 (rgba(255,206,96,.6)).
 * Keeps Tailwind CDN classes intact and overrides panel chrome.
 */

@font-face {
  font-family: 'Onest';
  src: url('/theme/fonts/Onest-VariableFont_wght.ttf') format('truetype-variations'),
       url('/theme/fonts/Onest-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --ho-primary:        #FFCE60;
  --ho-primary-dark:   #E6BA57;
  --ho-alpha60:        rgba(255, 206, 96, 0.6);
  --ho-alpha35:        rgba(255, 206, 96, 0.35);
  --ho-yellow-250:     #FFE2A0;
  --ho-yellow-bg:      #FFEBBE;

  /* Neutrals */
  --ho-black:          #000000;
  --ho-grey:           #373737;
  --ho-grey-alt:       #838383;
  --ho-grey-light:     #ACACAC;
  --ho-grey-stroke:    #EBEBEB;
  --ho-grey-bg:        #F7F7F7;
  --ho-grey-bg-alt:    #F4F4F4;
  --ho-white:          #FFFFFF;

  /* Semantic */
  --ho-green:          #26C33F;
  --ho-green-light:    rgba(38, 195, 63, 0.18);
  --ho-red:            #F44444;
  --ho-red-light:      #FFEAEA;
  --ho-blue:           #2C7EE7;

  /* Semantic fg/bg */
  --fg-1: var(--ho-grey);
  --fg-2: #5C5C5C;
  --fg-3: var(--ho-grey-alt);
  --fg-4: var(--ho-grey-light);
  --fg-inv: var(--ho-white);

  --bg-1: var(--ho-white);
  --bg-2: var(--ho-grey-bg);
  --bg-3: var(--ho-grey-bg-alt);
  --bg-dark: var(--ho-grey);

  --border-1: var(--ho-grey-stroke);
  --border-2: #CCCCCC;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 30px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-1: 0 1px 6px 0 rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 10.9px 0 rgba(0, 0, 0, 0.07);
  --shadow-3: 0 4px 23.9px 0 rgba(0, 0, 0, 0.07);
  --shadow-soft: 0 1px 22.2px 1px rgba(0, 0, 0, 0.055);

  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-2);
}

/* ---- Panel chrome overrides ---- */

/* Cards get HO surface + soft shadow + brand radius */
.card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-1) !important;
}

/* Filter buttons / selects — HO pill-ish tokens */
.filter-btn,
.filter-select {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  height: 35px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-1);
  background: var(--bg-1);
  color: var(--fg-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: .15s ease;
}
.filter-btn:hover,
.filter-select:hover {
  background: var(--bg-3);
}
.filter-btn.active {
  background: var(--ho-grey) !important;
  color: var(--fg-inv) !important;
  border-color: var(--ho-grey) !important;
}

/* ---- Primary action = Alpha-60 ---- */
.ho-btn,
.ho-btn-primary {
  all: unset;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  height: 38px;
  padding: 0 22px;
  min-width: max-content;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: .15s ease;
  background: var(--ho-alpha60);
  color: var(--fg-1);
  box-shadow: var(--shadow-1);
}
.ho-btn-primary:hover,
.ho-btn:hover {
  background: var(--ho-primary);
  filter: brightness(1.02);
}
.ho-btn-primary:active,
.ho-btn:active {
  transform: translateY(1px);
}
.ho-btn-primary:disabled,
.ho-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.ho-btn-secondary {
  all: unset;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  background: var(--bg-2);
  color: var(--fg-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s ease;
}
.ho-btn-secondary:hover { background: var(--bg-3); }

.ho-btn-dark {
  all: unset;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  height: 38px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  background: var(--ho-grey);
  color: var(--fg-inv);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s ease;
}
.ho-btn-dark:hover { opacity: .85; }

/* ---- Override the old "refresh" button style (bg-gray-900) when tagged ho-primary-refresh ---- */
#refreshBtn.ho-primary-refresh {
  background: var(--ho-alpha60) !important;
  color: var(--fg-1) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-1);
}
#refreshBtn.ho-primary-refresh:hover {
  background: var(--ho-primary) !important;
  filter: brightness(1.02);
}

/* ---- Headings + type ---- */
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--fg-1); }
h1 { font-weight: 700; letter-spacing: -0.01em; }
h2, h3 { font-weight: 700; }

/* Generic links — HomeOffer blue (stays but tames saturation) */
a.text-blue-600, .text-blue-600 { color: var(--ho-blue) !important; }
a.text-blue-700, .text-blue-700 { color: var(--ho-blue) !important; }

/* Tailwind bg-gray-900 used as CTA — force it brand on ho-primary-refresh only (above).
 * For other bg-gray-900 instances (e.g. dark chips) we don't touch. */

/* Badges: map existing utility classes to HO tones */
.badge-green,
.badge-yes {
  background: var(--ho-green-light);
  color: #128029;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
}
.badge-red {
  background: var(--ho-red-light);
  color: var(--ho-red);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
}

/* Focus ring — HO yellow */
input:focus, select:focus, button:focus, textarea:focus {
  outline: 2px solid var(--ho-alpha60);
  outline-offset: 1px;
}

/* Data table polish — font + header tone */
.data-table { font-family: var(--font-sans); }
.data-table thead th {
  font-weight: 600;
  color: var(--fg-3);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
}