/* ==========================================================================
   Theme — Western National
   --------------------------------------------------------------------------
   Every tenant-specific value lives here. To re-skin the portal for another
   brand, copy this file, change the tokens and the two image paths, and
   nothing in app.css needs to be touched.

   Values are lifted from /Themes/Western/css/themeStyles.css on the live site.
   ========================================================================== */

:root {
  /* --- brand palette ----------------------------------------------------- */
  --colour-primary:        #241917;   /* Western near-black brown            */
  --colour-primary-soft:   rgba(36, 25, 23, 0.9);
  --colour-secondary:      #ffffff;
  --colour-accent:         #0080b3;   /* link / highlight blue               */
  --colour-dark-grey:      #424342;
  --colour-mid-grey:       #77787b;
  --colour-light-grey:     #c6c6c6;
  --colour-neutral:        #f4f0ec;   /* card + active tab background        */
  --colour-body-text:      #333333;
  --colour-muted-text:     #555555;
  --colour-error:          #fd231f;
  --colour-success:        #0080b3;

  /* --- typography -------------------------------------------------------- */
  --font-primary: "opensans-regular", "Open Sans", Helvetica, Arial, sans-serif;
  --font-size-base: 14px;
  --line-height-base: 1.5;

  /* --- surfaces ---------------------------------------------------------- */
  --surface-page:   #ffffff;
  --surface-card:   #ffffff;
  --surface-sunken: #f4f0ec;
  --border-subtle:  #e4ded8;
  --radius-sm: 3px;
  --radius-md: 4px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  /* --- brand imagery ----------------------------------------------------- */
  --image-hero: url("../assets/images/login-banner.png");
  --image-arrow: url("../assets/images/arrow.svg");
  --image-landing-menu: url("../assets/images/landing-mid-banner.png");
  --image-landing-call: url("../assets/images/landing-right-banner.png");
  --logo-width: 150px;

  /* --- layout metrics (match the live grid exactly) ---------------------- */
  --header-height: 150px;
  --header-padding: 40px 80px 40px 35px;
  --content-measure: 81ch;
  --gutter-min: 1.2rem;
}

/* The claim pages put the brand panel beside the form. Western uses the same
   hero photograph behind a colour wash rather than a per-loss-type image. */
.brand-panel {
  background-color: var(--colour-primary);
  background-image:
    linear-gradient(rgba(36, 25, 23, 0.82), rgba(36, 25, 23, 0.82)),
    var(--image-hero);
  background-size: cover;
  background-position: center bottom;
}

/* Per-loss-type banners, as the original's bg<User><Claim><Loss> classes.
   These show the photograph as is, without the colour wash. */
.brand-panel[data-loss="personal-property-geyser"],
.brand-panel[data-loss="business-property-geyser"] {
  background-image: url("../assets/images/banner-property-geyser.jpg");
  background-position: 20% 75%;
}