/* ==========================================================================
   Stafford Audio — brand design tokens
   Import after fonts.css. Everything here mirrors the brand guide.
   ========================================================================== */
:root {
  /* Navy ramp (from the blue compass) */
  --sa-navy:   #700C18;  /* primary brand color, text, dark surfaces */
  --sa-deep:   #8E1B2A;  /* links on light backgrounds, hover states */
  --sa-ocean:  #A63A48;  /* secondary UI, icons, focus rings */
  --sa-sky:    #C4707B;  /* decorative only on light backgrounds */
  --sa-mist:   #E4B9BD;  /* tints, dividers on navy, subtle fills */

  /* Gold ramp (from the gold compass) */
  --sa-walnut:  #4A0710;
  --sa-bronze:  #7E2531;  /* small gold text on light backgrounds (AA) */
  --sa-antique: #96323F;  /* wordmark accent on light; large text / rules only */
  --sa-brass:   #B04A56;  /* hub color; gold text and accents on navy (AA) */
  --sa-straw:   #EFC9CD;  /* highlights on navy; never text on light */

  /* Neutrals */
  --sa-cream:  #FBF3E4;  /* warm page background, text on navy */
  --sa-sand:   #F5EAD8;  /* cards on cream, alternate sections */
  --sa-white:  #FFFFFF;
  --sa-slate:  #7A5C60;  /* secondary text on light backgrounds (AA) */
  --sa-line:   #E0D2C2;  /* hairlines on light */
  --sa-line-dark: rgba(251, 243, 228, 0.18); /* hairlines on navy */

  /* Semantic roles */
  --sa-bg:            var(--sa-cream);
  --sa-bg-elevated:   var(--sa-white);
  --sa-text:          var(--sa-navy);
  --sa-text-muted:    var(--sa-slate);
  --sa-link:          var(--sa-deep);
  --sa-link-hover:    var(--sa-navy);
  --sa-accent:        var(--sa-bronze);
  --sa-focus:         var(--sa-ocean);

  /* Typography */
  --sa-font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sa-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --sa-text-xs:   0.75rem;   /* 12px labels, eyebrows */
  --sa-text-sm:   0.875rem;  /* 14px meta, captions */
  --sa-text-base: 1.0625rem; /* 17px body */
  --sa-text-lg:   1.25rem;   /* 20px lead paragraphs */
  --sa-text-h3:   1.375rem;  /* 22px */
  --sa-text-h2:   1.75rem;   /* 28px */
  --sa-text-h1:   2.25rem;   /* 36px */
  --sa-text-display: clamp(2.5rem, 5vw, 3.5rem); /* 40–56px */

  --sa-leading-tight: 1.15;
  --sa-leading-body:  1.6;
  --sa-tracking-caps: 0.14em;  /* the AUDIO treatment: all caps, wide tracking */

  /* Shape and motion */
  --sa-radius-sm: 6px;
  --sa-radius:    12px;
  --sa-radius-lg: 20px;
  --sa-ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --sa-duration:  450ms;
}

/* Dark surface: apply .sa-dark to any section set on navy */
.sa-dark {
  --sa-bg:          var(--sa-navy);
  --sa-bg-elevated: #24417A;
  --sa-text:        var(--sa-cream);
  --sa-text-muted:  var(--sa-mist);
  --sa-link:        var(--sa-straw);
  --sa-link-hover:  var(--sa-white);
  --sa-accent:      var(--sa-brass);
  --sa-focus:       var(--sa-straw);
  --sa-line:        var(--sa-line-dark);
  background: var(--sa-bg);
  color: var(--sa-text);
}

/* Base type ------------------------------------------------------------- */
body {
  font-family: var(--sa-font-sans);
  font-size: var(--sa-text-base);
  line-height: var(--sa-leading-body);
  color: var(--sa-text);
  background: var(--sa-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .sa-display {
  font-family: var(--sa-font-serif);
  font-weight: 400;
  line-height: var(--sa-leading-tight);
  color: var(--sa-text);
  margin: 0 0 0.5em;
}
.sa-display { font-size: var(--sa-text-display); }
h1 { font-size: var(--sa-text-h1); }
h2 { font-size: var(--sa-text-h2); }
h3 { font-size: var(--sa-text-h3); }
p  { margin: 0 0 1em; }
.sa-lead { font-size: var(--sa-text-lg); }
.sa-muted { color: var(--sa-text-muted); }
a { color: var(--sa-link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--sa-link-hover); }
:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: 3px; }

/* The "AUDIO" treatment — eyebrows, section labels, nav items */
.sa-eyebrow {
  font-family: var(--sa-font-sans);
  font-size: var(--sa-text-xs);
  font-weight: 500;
  letter-spacing: var(--sa-tracking-caps);
  text-transform: uppercase;
  color: var(--sa-accent);
}
/* Eyebrow with the flanking rules from the wordmark */
.sa-eyebrow--ruled { display: inline-flex; align-items: center; gap: 14px; }
.sa-eyebrow--ruled::before, .sa-eyebrow--ruled::after {
  content: ""; width: 44px; height: 1.5px; background: currentColor; opacity: 0.9;
}

/* Buttons ---------------------------------------------------------------- */
.sa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--sa-font-sans); font-weight: 500; font-size: 1rem;
  padding: 0.75em 1.5em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--sa-duration) var(--sa-ease), color var(--sa-duration) var(--sa-ease);
}
.sa-btn--primary { background: var(--sa-navy); color: var(--sa-cream); }
.sa-btn--primary:hover { background: var(--sa-deep); color: var(--sa-white); }
.sa-btn--accent  { background: var(--sa-brass); color: var(--sa-navy); }
.sa-btn--accent:hover { background: var(--sa-straw); }
.sa-btn--ghost   { background: transparent; color: var(--sa-text); border-color: currentColor; }
.sa-dark .sa-btn--primary { background: var(--sa-cream); color: var(--sa-navy); }
.sa-dark .sa-btn--primary:hover { background: var(--sa-white); }

/* Cards and rules ---------------------------------------------------------- */
.sa-card { background: var(--sa-bg-elevated); border-radius: var(--sa-radius); padding: 1.5rem; }
.sa-rule { border: 0; height: 1.5px; background: var(--sa-accent); width: 66px; margin: 1.5rem 0; }

/* Logo sizing helpers ------------------------------------------------------- */
.sa-logo { display: block; height: auto; }
.sa-logo--nav { height: 40px; width: auto; }   /* horizontal lockup in a site header */
.sa-logo--mark { height: 32px; width: auto; }  /* mark alone, e.g. mobile header */

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}