/*
 * brand-tokens.css — canonical CSS custom-property definitions for TrashHaulers Valet.
 *
 * This file is the single source of truth for brand colors, typography stacks,
 * border-radius, and layout constants.  It is loaded by EVERY layout (landing and
 * portal) so that all views share the same design system without duplicating
 * variable declarations.
 *
 * Consuming stylesheets (valet-landing.css, portal.css) reference these tokens
 * with var(--brand-*) rather than hard-coded hex values.  Changing a color here
 * automatically propagates to the entire site.
 *
 * Font note: DM Sans is the intended brand typeface but must be self-hosted to
 * comply with the strict font-src 'self' CSP.  See valet-landing.css for the
 * step-by-step instructions.  Until the font files are in wwwroot/fonts/, all
 * headings and body text fall back to the high-quality system-ui stack below.
 */

:root {
  /* --- Primary palette --- */
  --brand-primary:       #1b6b5c;
  --brand-primary-dark:  #134a42;
  --brand-secondary:     #f4b942;

  /* --- Surface & text --- */
  --brand-surface: #f6f8f7;
  --brand-text:    #1a2e2a;
  --brand-muted:   #5c726d;

  /* --- Hero overlay (landing page) --- */
  --brand-hero-overlay: rgba(19, 74, 66, 0.82);

  /* --- Typography --- */
  --brand-font-heading: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Shape & layout --- */
  --brand-radius:    12px;
  --brand-max-width: 1100px;
}

/*
 * Bootstrap btn-primary brand override.
 *
 * IMPORTANT — why these are real declarations and not just --bs-btn-* variables:
 *
 * The `--bs-btn-bg` / `--bs-btn-hover-bg` custom-property API was introduced in
 * Bootstrap 5.3.  The version vendored in wwwroot/lib/bootstrap is **5.1.0**,
 * which hard-codes its button palette:
 *
 *     .btn-primary { color:#fff; background-color:#0d6efd; border-color:#0d6efd }
 *
 * `--bs-btn-bg` appears literally zero times in bootstrap.min.css at 5.1.0, so an
 * override that only sets those variables sets nothing that Bootstrap ever reads —
 * the variable resolves to the brand green while `background-color` stays Bootstrap
 * blue.  That is exactly what happened here: every btn-primary on the site (sign in,
 * create account, portal actions, thank-you) rendered #0d6efd against a green brand.
 *
 * The declarations below therefore set the real properties.  The --bs-btn-* values
 * are kept alongside them so the palette stays coherent if Bootstrap is later
 * upgraded to >=5.3, at which point both paths agree.
 *
 * Contrast verification (WCAG AA, minimum 4.5:1 for normal text):
 *   #fff on --brand-primary (#1b6b5c) → 5.96:1  ✓ AA pass
 *   #fff on --brand-primary-dark (#134a42) → 7.91:1  ✓ AAA pass
 *
 * The .valet-cta .btn-primary rule in valet-landing.css keeps the amber CTA button
 * on the landing page: at (0,2,0) it outranks the (0,1,0) selector below.
 */
.btn-primary {
  --bs-btn-color:                #fff;
  --bs-btn-bg:                   var(--brand-primary);
  --bs-btn-border-color:         var(--brand-primary);
  --bs-btn-hover-color:          #fff;
  --bs-btn-hover-bg:             var(--brand-primary-dark);
  --bs-btn-hover-border-color:   var(--brand-primary-dark);
  --bs-btn-focus-shadow-rgb:     27, 107, 92;
  --bs-btn-active-color:         #fff;
  --bs-btn-active-bg:            var(--brand-primary-dark);
  --bs-btn-active-border-color:  var(--brand-primary-dark);
  --bs-btn-disabled-color:       #fff;
  --bs-btn-disabled-bg:          var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);

  color:            #fff;
  background-color: var(--brand-primary);
  border-color:     var(--brand-primary);
}

/* (0,2,0) — matches Bootstrap 5.1's own .btn-primary:hover specificity and loads later. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  color:            #fff;
  background-color: var(--brand-primary-dark);
  border-color:     var(--brand-primary-dark);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color:            #fff;
  background-color: var(--brand-primary);
  border-color:     var(--brand-primary);
}

/*
 * Bootstrap btn-outline-primary brand override.
 *
 * Same 5.1.0 constraint as above — real declarations required.
 * Contrast: --brand-primary (#1b6b5c) on white → 5.96:1  ✓ AA pass
 *           #fff on --brand-primary (filled hover state) → 5.96:1  ✓ AA pass
 */
.btn-outline-primary {
  --bs-btn-color:              var(--brand-primary);
  --bs-btn-border-color:       var(--brand-primary);
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb:   27, 107, 92;
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);

  color:            var(--brand-primary);
  border-color:     var(--brand-primary);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active,
.btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle {
  color:            #fff;
  background-color: var(--brand-primary);
  border-color:     var(--brand-primary);
}