/* Green Acres — additive polish layer. Safe to append after any
 * existing stylesheet. Refines typography, shadows, focus rings, scrollbars,
 * and button hover states without changing layout widths, grid templates,
 * z-index, element positions, or any ID/class names. */

@import url('https://rsms.me/inter/inter.css');

:root {
  --ga-shadow-1: 0 1px 2px rgba(16,24,20,.04), 0 1px 1px rgba(16,24,20,.03);
  --ga-shadow-2: 0 2px 4px rgba(16,24,20,.05), 0 8px 24px rgba(16,24,20,.06);
  --ga-shadow-3: 0 4px 10px rgba(16,24,20,.08), 0 18px 40px rgba(16,24,20,.12);
  --ga-ring:     rgba(27,122,86,.18);
}

/* Use Inter's variable font where available; tighten body defaults. */
html, body, input, select, textarea, button {
  font-family: 'Inter var', 'Inter', ui-sans-serif, system-ui,
               -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif !important;
  font-feature-settings: 'cv02','cv03','cv04','cv11' !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

body {
  background: #f7f8f6 !important;
  color: #0f1b14;
}

/* Softer, more premium-feeling shadows on cards and elevated surfaces.
 * Only applied where the element already uses a white-ish background,
 * so we don't accidentally darken native controls. */
.card, .customer-card, .appt-modal, .detail-modal, .modal-content,
.nav-tabs, .dropdown, .popup, .side-panel,
.appt-card, .block-card, .customer-row,
.stage, .stage-card, .bucket, .kanban-col, .pipeline-col {
  box-shadow: var(--ga-shadow-2) !important;
  transition: box-shadow .2s ease, transform .08s ease, border-color .2s ease;
}

/* Headers get a gentler shadow */
.header, .topbar, .app-header {
  box-shadow: 0 1px 10px rgba(0,0,0,.08) !important;
}

/* Buttons: nicer active/hover feedback everywhere.
 * We intentionally do NOT override background color or structure. */
button, .btn, [class*="btn-"] {
  transition: transform .08s ease, box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease,
              color .18s ease !important;
  will-change: transform;
}
button:not(:disabled):hover, .btn:not(:disabled):hover, [class*="btn-"]:not(:disabled):hover {
  box-shadow: var(--ga-shadow-2);
}
button:not(:disabled):active, .btn:not(:disabled):active, [class*="btn-"]:not(:disabled):active {
  transform: translateY(1px);
}

/* Focus rings: replace faint defaults with the brand ring. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--ga-ring) !important;
}

/* Scrollbars (WebKit): subtle rail that matches the palette. */
::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb  { background: #d7dbd2; border-radius: 999px;
                             border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #b9beb3; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track  { background: transparent; }

/* Selection color on brand */
::selection { background: rgba(27,122,86,.18); color: inherit; }

/* Slightly tighter line-height on small UI text (chips, tags, labels) for
 * that crisp SaaS feel — targeting common class names across the app. */
.chip, .badge, .tag, .pill, .label,
[class*="-chip"], [class*="-badge"], [class*="-tag"] {
  letter-spacing: 0.01em !important;
}

/* Heading rhythm polish — only if the HTML doesn't explicitly set margin. */
h1 { letter-spacing: -0.015em; }
h2 { letter-spacing: -0.01em; }
h3 { letter-spacing: -0.005em; }

/* Subtle hover lift on cards that are explicitly click targets. */
.appt-card:hover, .customer-row:hover, .stage-card:hover, .kanban-card:hover,
[class*="job-card"]:hover {
  box-shadow: var(--ga-shadow-3) !important;
}