/* FleetCare Phase 2: semantic colors.  The absent data-theme follows the OS. */
:root {
  color-scheme: light;
  --p2-bg: #F5F7F5;
  --p2-surface: #FFFFFF;
  --p2-surface-alt: #E8F0EB;
  --p2-ink: #051A2D;
  --p2-muted: #51616A;
  --p2-border: #5A6B73;
  --p2-brand: #034633;
  --p2-primary: #034633;
  --p2-on-primary: #FFFFFF;
  --p2-accent: #D5AA43;
  --p2-on-accent: #051A2D;
  /* These three colors describe deliberately dark panels in both themes. */
  --p2-dark: #051A2D;
  --p2-on-dark: #FFFFFF;
  --p2-soft-on-dark: #E1E7E3;
  --p2-shadow: 0 18px 46px rgba(5, 26, 45, 0.10);
  --p2-accent-text: #8B6914;
  --p2-focus: #034633;
  --p2-error: #a33125;
  --p2-primary-hover: #051A2D;

  /* Bridge the original stylesheet so its variable-based rules also follow the theme. */
  --ink: var(--p2-ink);
  --teal: var(--p2-brand);
  --teal-dark: var(--p2-brand);
  --teal-deep: var(--p2-dark);
  --teal-soft: var(--p2-surface-alt);
  --amber: var(--p2-accent);
  --amber-dark: var(--p2-accent-text);
  --sand: var(--p2-bg);
  --cream: var(--p2-surface);
  --muted: var(--p2-muted);
  --line: var(--p2-border);
  --shadow: var(--p2-shadow);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --p2-bg: #051A2D;
  --p2-surface: #0B2A3D;
  --p2-surface-alt: #0E3050;
  --p2-ink: #FFFFFF;
  --p2-muted: #E1E7E3;
  --p2-border: #9BB0B8;
  --p2-brand: #E1E7E3;
  --p2-primary: #D5AA43;
  --p2-on-primary: #051A2D;
  --p2-accent: #D5AA43;
  --p2-on-accent: #051A2D;
  --p2-dark: #051A2D;
  --p2-on-dark: #FFFFFF;
  --p2-soft-on-dark: #E1E7E3;
  --p2-shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
  --p2-accent-text: #F1CE76;
  --p2-focus: #F1CE76;
  --p2-error: #ffa79d;
  --p2-primary-hover: #E3C15C;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --p2-bg: #051A2D;
    --p2-surface: #0B2A3D;
    --p2-surface-alt: #0E3050;
    --p2-ink: #FFFFFF;
    --p2-muted: #E1E7E3;
    --p2-border: #9BB0B8;
    --p2-brand: #E1E7E3;
    --p2-primary: #D5AA43;
    --p2-on-primary: #051A2D;
    --p2-accent: #D5AA43;
    --p2-on-accent: #051A2D;
    --p2-dark: #051A2D;
    --p2-on-dark: #FFFFFF;
    --p2-soft-on-dark: #E1E7E3;
    --p2-shadow: 0 18px 46px rgba(0, 0, 0, 0.35);
    --p2-accent-text: #F1CE76;
    --p2-focus: #F1CE76;
    --p2-error: #ffa79d;
    --p2-primary-hover: #E3C15C;
  }
}

body {
  background-color: var(--p2-bg);
  color: var(--p2-ink);
}

:focus-visible {
  outline: 3px solid var(--p2-focus);
  outline-offset: 4px;
}

::selection {
  background: var(--p2-accent);
  color: var(--p2-on-accent);
}

/* Header logos only: the footer contains a standalone inverse logo. */
.site-header .brand-standard { display: block; }
.site-header .brand-inverse { display: none; }
:root[data-theme='dark'] .site-header .brand-standard { display: none; }
:root[data-theme='dark'] .site-header .brand-inverse { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .site-header .brand-standard { display: none; }
  :root:not([data-theme='light']) .site-header .brand-inverse { display: block; }
}

.site-header { background-color: var(--p2-bg); }
.header-inner { border-color: var(--p2-border); }
.nav-links a,
.lang-switch { color: var(--p2-ink); }
.nav-links a:hover,
.nav-links a[aria-current='page'],
.lang-switch:hover { background: var(--p2-surface-alt); color: var(--p2-ink); }
.nav-links a[aria-current='page'] { text-decoration-color: var(--p2-accent-text); }
.lang-switch,
.menu-toggle { border-color: var(--p2-border); color: var(--p2-ink); }
.menu-toggle:hover,
.site-header[data-open='true'] .menu-toggle {
  background: var(--p2-primary);
  border-color: var(--p2-primary);
  color: var(--p2-on-primary);
}
@media (max-width: 959px) {
  .site-header[data-open='true'] .main-nav {
    background: var(--p2-surface);
    border-color: var(--p2-border);
    box-shadow: var(--p2-shadow);
  }
}

/* Avoid a nonfunctional control when JavaScript is unavailable. */
.theme-toggle,
.main-nav .nav-actions .theme-toggle { display: none; }
.js[data-theme-ready='true'] .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--p2-border);
  border-radius: 10px;
  background: var(--p2-surface);
  color: var(--p2-ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.js[data-theme-ready='true'] .theme-toggle:hover {
  border-color: var(--p2-brand);
  background: var(--p2-surface-alt);
  color: var(--p2-ink);
}
.js[data-theme-ready='true'] .theme-toggle:focus-visible {
  outline: 3px solid var(--p2-focus);
  outline-offset: 4px;
}

.skip-link { background: var(--p2-dark); color: var(--p2-on-dark); }
.button-primary,
.button-primary:visited {
  background: var(--p2-primary);
  border-color: var(--p2-primary);
  color: var(--p2-on-primary);
}
.button-primary:hover {
  background: var(--p2-primary-hover);
  border-color: var(--p2-primary-hover);
  color: var(--p2-on-primary);
}
.button-secondary { border-color: var(--p2-border); color: var(--p2-brand); }
.button-secondary:hover { background: var(--p2-surface-alt); border-color: var(--p2-brand); color: var(--p2-ink); }
.button-light { background: var(--p2-accent); border-color: var(--p2-accent); color: var(--p2-on-accent); }
.button-light:hover { background: #f4c66b; border-color: #f4c66b; color: var(--p2-on-accent); }
.button-outline-light { color: var(--p2-on-dark); border-color: var(--p2-on-dark); }

/* Legacy hard-coded surfaces and copy across the home and inner pages. */
.hero-lead,
.inner-lead,
.app-copy p,
.legal-section p,
.legal-section li { color: var(--p2-muted); }
.section-kicker,
.service-item > span { color: var(--p2-accent-text); }
.hero-image,
.inner-image { background-color: var(--p2-surface-alt); }
.image-label { background: var(--p2-surface); border-color: var(--p2-border); box-shadow: var(--p2-shadow); color: var(--p2-ink); }
.image-label small { color: var(--p2-muted); }
.image-label-icon { background: var(--p2-accent); color: var(--p2-on-accent); }
.service-strip { background: var(--p2-surface-alt); border-color: var(--p2-border); }
.step,
.feature { border-color: var(--p2-border); }
.step-number { border-color: var(--p2-border); color: var(--p2-brand); }
.step-icon,
.feature-icon,
.benefit > span:first-child { background: var(--p2-surface-alt); color: var(--p2-brand); }
.audience-section { background: var(--p2-surface-alt); }
.audience-card { background: var(--p2-surface); border-color: var(--p2-border); }
.audience-card.featured { background: var(--p2-dark); border-color: var(--p2-dark); color: var(--p2-on-dark); }
.audience-card.featured h3,
.audience-card.featured p,
.audience-card.featured .card-link { color: var(--p2-on-dark); }
.audience-card.featured .audience-number { color: var(--p2-accent); }
.app-band-inner { background: var(--p2-surface-alt); }
.app-badge { background: var(--p2-surface); border-color: var(--p2-border); color: var(--p2-ink); }
summary { color: var(--p2-brand); }
summary::after { border-color: var(--p2-border); color: var(--p2-brand); }
details[open] > summary::after { background: var(--p2-primary); border-color: var(--p2-primary); color: var(--p2-on-primary); }

/* Forms, their feedback, and draft legal notices retain legible boundaries. */
.form-panel { background: var(--p2-surface); border-color: var(--p2-border); box-shadow: var(--p2-shadow); }
input:not([type='checkbox']):not([type='radio']):not([type='submit']),
select,
textarea { background: var(--p2-surface); border-color: var(--p2-border); color: var(--p2-ink); }
input::placeholder,
textarea::placeholder { color: var(--p2-muted); opacity: 1; }
input:not([type='checkbox']):not([type='radio']):hover,
select:hover,
textarea:hover { border-color: var(--p2-brand); }
.form-panel input:not([type='checkbox']):not([type='radio']):not([type='submit'])[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] { border-color: var(--p2-error); }
input[type='checkbox'],
input[type='radio'] { accent-color: var(--p2-primary); }
.form-success,
.legal-notice { background: var(--p2-surface-alt); border-color: var(--p2-border); color: var(--p2-ink); }

/* Always-dark editorial panels, including the footer in both modes. */
.final-cta-inner,
.site-footer,
.brand-guide-hero { background: var(--p2-dark); color: var(--p2-on-dark); }
.final-cta h2,
.site-footer .brand,
.footer-grid h2,
.footer-grid h3,
.brand-guide-hero h1 { color: var(--p2-on-dark); }
.final-cta p,
.footer-brand p,
.footer-location,
.footer-bottom,
.footer-links a,
.footer-grid a:not(.brand):not(.button),
.brand-guide-hero p { color: var(--p2-soft-on-dark); }
.footer-links a:hover,
.footer-grid a:not(.brand):not(.button):hover { color: var(--p2-on-dark); }
.brand-guide-hero .section-kicker { color: var(--p2-accent); }
.brand-hero-mark { background: #034633; }
:is(.audience-card.featured, .final-cta, .site-footer, .brand-guide-hero) :focus-visible { outline-color: var(--p2-accent); }

/* Brand guide chrome follows the theme; its comparison examples remain fixed. */
.palette-band { background: var(--p2-surface-alt); }
.type-card,
.usage-item { border-color: var(--p2-border); }
.type-card h3,
.type-sample,
.usage-item h3 { color: var(--p2-brand); }
.type-name,
.usage-item p,
.brand-guide .download-note { color: var(--p2-muted); }
.logo-preview:not(.is-dark),
.palette-panel:not(.is-dark) { background: #FFFFFF; border-color: #627d70; color: #051A2D; }
.logo-preview.is-dark,
.palette-panel.is-dark { background: #051A2D; border-color: #051A2D; color: #F5F7F5; }
.logo-preview:not(.is-dark) h3,
.palette-panel:not(.is-dark) h3,
.logo-preview:not(.is-dark) a,
.palette-panel:not(.is-dark) .swatch-name { color: #051A2D; }
.logo-preview:not(.is-dark) .label,
.palette-panel:not(.is-dark) .swatch-code,
.palette-panel:not(.is-dark) .contrast-note { color: #405e5a; }
.logo-preview.is-dark h3,
.palette-panel.is-dark h3,
.logo-preview.is-dark a,
.palette-panel.is-dark .swatch-name { color: #F5F7F5; }
.logo-preview.is-dark .label,
.palette-panel.is-dark .swatch-code,
.palette-panel.is-dark .contrast-note { color: #c6d9d1; }
.logo-preview:not(.is-dark) :focus-visible,
.palette-panel:not(.is-dark) :focus-visible { outline-color: #034633; }
.logo-preview.is-dark :focus-visible,
.palette-panel.is-dark :focus-visible { outline-color: #D5AA43; }

@media (forced-colors: active) {
  .js[data-theme-ready='true'] .theme-toggle { border-color: ButtonText; }
  :focus-visible,
  .skip-link:focus-visible,
  .js[data-theme-ready='true'] .theme-toggle:focus-visible,
  :is(.audience-card.featured, .final-cta, .site-footer, .brand-guide-hero) :focus-visible,
  .logo-preview:not(.is-dark) :focus-visible,
  .palette-panel:not(.is-dark) :focus-visible,
  .logo-preview.is-dark :focus-visible,
  .logo-preview.is-dark a:focus-visible,
  .palette-panel.is-dark :focus-visible { outline-color: Highlight; }
}