/* OWNER-LOCKED — Searchooli / DailyFlo Blue-Collar Modern V1
   Canonical policy: docs/design-system/BLUE_COLLAR_MODERN_V1.md
   Searchooli = showroom. DailyFlo = cockpit. Same manufacturer. */

:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  --font-heading: 'Archivo', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;

  --bg: #031521 !important;
  --bg2: #06283A !important;
  --bg3: #082F44 !important;
  --bg4: #0A3B52 !important;
  --border: rgba(10, 102, 138, .55) !important;
  --border2: #0A668A !important;
  --text: #F4FAFF !important;
  --text2: #B7D1E1 !important;
  --text3: #7894A7 !important;
  --accent: #20DDF5 !important;
  --accent2: #1797FF !important;
  --blue: #1797FF !important;
  --blue-bg: rgba(23, 151, 255, .12) !important;
  --theme-accent-1: #20DDF5 !important;

  --surface-raised: #06283A !important;
  --surface-2: #082F44 !important;
  --card-bg: #082F44 !important;
  --muted: #7894A7 !important;
  --text-muted: #7894A7 !important;
  --text-primary: #F4FAFF !important;
  --text-secondary: #B7D1E1 !important;
  --border-subtle: rgba(10, 102, 138, .55) !important;

  --radius: 14px !important;
  --radius-lg: 18px !important;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  --gap-controls: 12px !important;
  --gap-cards: 16px !important;

  /* BB-065 — default typography contract inherited by every new client site. */
  --text-hero: 3rem;
  --text-heading: 1.75rem;
  --text-card: 1.1875rem;
  --text-body: 1.125rem;
  --text-small: .875rem;
  --text-label: .75rem;

  --fs-page-title: var(--text-hero) !important;
  --fs-section-title: var(--text-heading) !important;
  --fs-card-title: var(--text-card) !important;
  --fs-body: var(--text-body) !important;
  --fs-body-2: var(--text-body) !important;
  --fs-helper: var(--text-small) !important;
  --fs-meta: var(--text-label) !important;

  --df-shadow-sm: 0 2px 8px rgba(0, 0, 0, .16), 0 8px 20px rgba(0, 0, 0, .10);
  --df-shadow: 0 8px 24px rgba(0, 0, 0, .20), 0 18px 42px rgba(0, 0, 0, .12);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font) !important;
}

body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(circle at 12% -10%, rgba(32, 221, 245, .10), transparent 34%),
    linear-gradient(180deg, #06283A 0%, #031521 54%, #021019 100%) !important;
  color: var(--text) !important;
  line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.section-title,
.card-title,
.dailyflo-wordmark,
.modal-title,
.panel-title {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.018em;
  color: var(--text);
}

h1,
.page-title {
  font-size: var(--fs-page-title);
  line-height: 1.08;
  font-weight: 700 !important;
}

h2,
.section-title {
  font-size: var(--fs-section-title);
  line-height: 1.14;
  font-weight: 650 !important;
}

h3,
h4,
.card-title,
.panel-title {
  font-weight: 650 !important;
}

.content,
.view-content,
.page-content,
.panel-body,
.card-body {
  line-height: 1.55;
}

.card,
.panel,
.modal,
.lead-card,
.stat-card,
.metric-card,
.gsearch,
.gsearch-results,
.table-wrap,
.data-table,
.form-card {
  border-radius: var(--radius) !important;
  border-color: var(--border) !important;
}

.card,
.panel,
.lead-card,
.stat-card,
.metric-card,
.form-card {
  box-shadow: var(--df-shadow-sm);
}

.btn,
button.btn,
input[type='button'],
input[type='submit'] {
  min-height: 38px;
  border-radius: 10px !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
}

.btn-primary,
.btn.primary,
button.primary {
  background: #1797FF !important;
  border-color: #1797FF !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(23, 151, 255, .20);
}

input,
select,
textarea {
  border-radius: 10px !important;
  border-color: var(--border2) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #20DDF5 !important;
  box-shadow: 0 0 0 2px rgba(32, 221, 245, .12) !important;
  outline: none;
}

.eyebrow,
.kicker,
.label-caps,
.section-kicker {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #20DDF5 !important;
}

.topbar,
.nav-tabs {
  background-color: rgba(3, 21, 33, .92) !important;
  border-color: var(--border) !important;
}

.nav-tab {
  font-family: var(--font) !important;
}

.nav-tab.active {
  color: #F4FAFF !important;
  border-bottom-color: #20DDF5 !important;
  text-shadow: 0 0 16px rgba(32, 221, 245, .25) !important;
}

.page-header,
.section-header {
  margin-bottom: 24px;
}

.card-grid,
.metrics-grid,
.stats-grid {
  gap: 16px !important;
}

.card,
.panel,
.form-card {
  padding: 16px 24px;
}

.form-row,
.form-grid {
  gap: 16px 24px;
}

label {
  margin-bottom: 8px;
}

.help-text,
.helper-text,
.meta,
.metadata,
.muted {
  color: var(--text3) !important;
  font-size: var(--fs-helper);
  line-height: 1.45;
}

@media (max-width: 720px) {
  :root {
    --fs-page-title: 26px !important;
    --fs-section-title: 20px !important;
    --fs-card-title: 16px !important;
    --fs-body: 15px !important;
  }

  .card,
  .panel,
  .form-card {
    padding: 16px;
  }
}