/*
 * Long Range Brand Group — Responsive Typography & Component State Foundation
 * ALIGN 1.0 / 0726
 * Foundation tokens only. No page-specific styling.
 */

:root {
  /* Approved brand colors */
  --lrbg-olive-black: #1E1E16;
  --lrbg-olive-2: #2A2B20;
  --lrbg-field-green: #4A5238;
  --lrbg-cream: #F5F2E8;
  --lrbg-bone: #E4DFCE;
  --lrbg-brass: #A98F4E;
  --lrbg-brass-light: #C4A96B;

  /* Type families */
  --lrbg-font-heading: "Work Sans", Arial, sans-serif;
  --lrbg-font-body: "Work Sans", Arial, sans-serif;
  --lrbg-font-editorial: "Gloock", Georgia, serif;
  --lrbg-font-label: "Work Sans", Arial, sans-serif;
  --lrbg-font-mono: "Geist Mono", "Courier New", monospace;

  /* Type roles: desktop */
  --lrbg-hero-h1-size: 3.5rem;
  --lrbg-page-h1-size: 3rem;
  --lrbg-section-h2-size: 2.25rem;
  --lrbg-section-h3-size: 1.75rem;
  --lrbg-card-title-size: 1.375rem;
  --lrbg-body-large-size: 1.25rem;
  --lrbg-body-size: 1rem;
  --lrbg-body-small-size: .875rem;
  --lrbg-eyebrow-size: .75rem;
  --lrbg-button-size: .875rem;
  --lrbg-footer-size: .875rem;

  /* Layout rhythm */
  --lrbg-space-section: 7.5rem;
  --lrbg-space-section-compact: 5rem;
  --lrbg-space-content: 2rem;
  --lrbg-space-card: 1.5rem;
  --lrbg-space-control-y: .9375rem;
  --lrbg-space-control-x: 1.625rem;
  --lrbg-measure-body: 68ch;
  --lrbg-measure-heading: 18ch;
  --lrbg-focus-ring: 3px solid var(--lrbg-brass);
  --lrbg-transition: 180ms ease;
}

/* Typography roles */
.lrbg-type-hero-h1,
.lrbg-type-page-h1,
.lrbg-type-section-h2,
.lrbg-type-section-h3,
.lrbg-type-card-title {
  margin-block: 0;
  color: var(--lrbg-olive-black);
  font-family: var(--lrbg-font-heading);
  text-wrap: balance;
}

.lrbg-type-hero-h1 {
  max-inline-size: 15ch;
  font-size: var(--lrbg-hero-h1-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.lrbg-type-page-h1 {
  max-inline-size: var(--lrbg-measure-heading);
  font-size: var(--lrbg-page-h1-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.lrbg-type-section-h2 {
  max-inline-size: 24ch;
  font-size: var(--lrbg-section-h2-size);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.lrbg-type-section-h3 {
  max-inline-size: 28ch;
  font-size: var(--lrbg-section-h3-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.lrbg-type-card-title {
  font-size: var(--lrbg-card-title-size);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.lrbg-type-body-large,
.lrbg-type-body,
.lrbg-type-body-small,
.lrbg-type-footer {
  max-inline-size: var(--lrbg-measure-body);
  color: var(--lrbg-olive-2);
  font-family: var(--lrbg-font-body);
  font-weight: 400;
}

.lrbg-type-body-large {
  font-size: var(--lrbg-body-large-size);
  line-height: 1.55;
}

.lrbg-type-body {
  font-size: var(--lrbg-body-size);
  line-height: 1.65;
}

.lrbg-type-body-small {
  font-size: var(--lrbg-body-small-size);
  line-height: 1.55;
}

.lrbg-type-footer {
  font-size: var(--lrbg-footer-size);
  line-height: 1.6;
}

.lrbg-type-eyebrow,
.lrbg-type-label {
  color: var(--lrbg-field-green);
  font-family: var(--lrbg-font-label);
  font-size: var(--lrbg-eyebrow-size);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lrbg-type-button {
  font-family: var(--lrbg-font-heading);
  font-size: var(--lrbg-button-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
}

.lrbg-editorial {
  font-family: var(--lrbg-font-editorial);
  font-style: normal;
}

/* Button foundations */
.lrbg-button {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--lrbg-space-control-y) var(--lrbg-space-control-x);
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--lrbg-font-heading);
  font-size: var(--lrbg-button-size);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--lrbg-transition), background-color var(--lrbg-transition), border-color var(--lrbg-transition), transform var(--lrbg-transition);
}

.lrbg-button--primary {
  border-color: var(--lrbg-brass);
  background: var(--lrbg-brass);
  color: var(--lrbg-olive-black);
}

.lrbg-button--primary:hover {
  border-color: var(--lrbg-field-green);
  background: var(--lrbg-field-green);
  color: var(--lrbg-cream);
}

.lrbg-button--primary:active {
  transform: translateY(1px);
  border-color: var(--lrbg-olive-black);
  background: var(--lrbg-olive-black);
  color: var(--lrbg-cream);
}

.lrbg-button--secondary {
  border-color: var(--lrbg-field-green);
  background: transparent;
  color: var(--lrbg-field-green);
}

.lrbg-button--secondary:hover {
  background: var(--lrbg-field-green);
  color: var(--lrbg-cream);
}

.lrbg-button--secondary:active {
  transform: translateY(1px);
  border-color: var(--lrbg-olive-black);
  background: var(--lrbg-olive-black);
  color: var(--lrbg-cream);
}

.lrbg-button--text {
  min-block-size: 44px;
  padding-inline: 0;
  border-color: transparent;
  background: transparent;
  color: var(--lrbg-field-green);
  text-decoration: underline;
  text-decoration-color: var(--lrbg-brass);
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}

.lrbg-button--text:hover,
.lrbg-button--text:active {
  color: var(--lrbg-olive-black);
  text-decoration-color: var(--lrbg-field-green);
}

.lrbg-button:focus-visible,
.lrbg-button--text:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--lrbg-focus-ring);
  outline-offset: 3px;
}

.lrbg-button[disabled],
.lrbg-button[aria-disabled="true"],
.lrbg-button.is-disabled {
  border-color: #B6B7B1;
  background: var(--lrbg-bone);
  color: var(--lrbg-field-green);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
  transform: none;
}

/* Reusable component foundations */
.lrbg-card {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  gap: 1rem;
  padding: var(--lrbg-space-card);
  border: 1px solid var(--lrbg-bone);
  border-radius: 2px;
  background: var(--lrbg-cream);
  color: var(--lrbg-olive-2);
}

.lrbg-card:hover {
  border-color: var(--lrbg-brass);
}

.lrbg-card:focus-within {
  outline: var(--lrbg-focus-ring);
  outline-offset: 3px;
}

.lrbg-card.is-disabled {
  background: var(--lrbg-bone);
  color: var(--lrbg-field-green);
  opacity: .7;
  pointer-events: none;
}

.lrbg-form-control {
  inline-size: 100%;
  min-block-size: 44px;
  padding: .75rem 1rem;
  border: 1px solid var(--lrbg-field-green);
  border-radius: 2px;
  background: var(--lrbg-cream);
  color: var(--lrbg-olive-black);
  font-family: var(--lrbg-font-body);
  font-size: 1rem;
  line-height: 1.5;
}

.lrbg-form-control:hover {
  border-color: var(--lrbg-field-green);
}

.lrbg-form-control:focus {
  border-color: var(--lrbg-brass);
}

.lrbg-form-control[aria-invalid="true"],
.lrbg-form-control.is-error {
  border-color: #9F2D24;
}

.lrbg-form-control:disabled {
  border-color: var(--lrbg-bone);
  background: var(--lrbg-bone);
  color: var(--lrbg-field-green);
  cursor: not-allowed;
}

.lrbg-form-message {
  margin-block-start: .5rem;
  font-family: var(--lrbg-font-body);
  font-size: .875rem;
  line-height: 1.5;
}

.lrbg-form-message--error { color: #7D211B; }
.lrbg-form-message--success { color: #365B35; }

/* Responsive section and content rhythm */
.lrbg-section {
  padding-block: var(--lrbg-space-section);
}

.lrbg-section--compact {
  padding-block: var(--lrbg-space-section-compact);
}

.lrbg-content-stack {
  display: flex;
  flex-direction: column;
  gap: var(--lrbg-space-content);
}

@media (max-width: 1024px) {
  :root {
    --lrbg-hero-h1-size: 2.5rem;
    --lrbg-page-h1-size: 2.375rem;
    --lrbg-section-h2-size: 1.875rem;
    --lrbg-section-h3-size: 1.5rem;
    --lrbg-card-title-size: 1.25rem;
    --lrbg-body-large-size: 1.125rem;
    --lrbg-space-section: 5rem;
    --lrbg-space-section-compact: 3.75rem;
    --lrbg-space-content: 1.75rem;
  }

  .lrbg-type-hero-h1 { line-height: 1.08; }
}

@media (max-width: 767px) {
  :root {
    --lrbg-hero-h1-size: 1.875rem;
    --lrbg-page-h1-size: 1.875rem;
    --lrbg-section-h2-size: 1.5rem;
    --lrbg-section-h3-size: 1.25rem;
    --lrbg-card-title-size: 1.125rem;
    --lrbg-body-large-size: 1.0625rem;
    --lrbg-body-size: 1rem;
    --lrbg-body-small-size: .875rem;
    --lrbg-eyebrow-size: .6875rem;
    --lrbg-footer-size: .8125rem;
    --lrbg-space-section: 3.75rem;
    --lrbg-space-section-compact: 3rem;
    --lrbg-space-content: 1.5rem;
    --lrbg-space-card: 1.25rem;
  }

  .lrbg-type-hero-h1 {
    max-inline-size: 18ch;
    line-height: 1.12;
    letter-spacing: -.025em;
  }

  .lrbg-type-page-h1 { line-height: 1.12; }
  .lrbg-button { inline-size: 100%; }
  .lrbg-button--text { inline-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .lrbg-button {
    transition-duration: .01ms;
  }
}