/* LC-2300 (5): primary buttons that read as buttons and meet WCAG 2.2 AA everywhere on the site.
   Brian 2026-10-06: "Next buttons are not WCAG friendly, they don't look like a default button".
   --sv-cta / --sv-cta-text are the brand's button colour, darkened when needed so the label is at
   least 4.5:1 (js/live/contrast.js keeps them current as the brand loads). A primary button has a
   solid fill, a border, a small shadow and a visible focus ring. On the tour's dark card it is a
   light button (the brand colour there was dark on dark). */

:root { --sv-cta: #8E5140; --sv-cta-text: #FFFFFF; --sv-focus: #1D2951; }

/* light surfaces: marked buttons, and the designer screens' brand-coloured buttons and links */
.sv-primary,
.sv-root button[style*="background: var(--terra)"],
.sv-root a[style*="background: var(--terra)"],
.sv-root button[style*="background: var(--cta)"],
.sv-root a[style*="background: var(--cta)"],
.lv-btn.terra, .lv-btn.cta {
  background: var(--sv-cta) !important;
  color: var(--sv-cta-text) !important;
  border: 2px solid var(--sv-cta) !important;
  box-shadow: 0 1px 2px rgba(10, 14, 35, .18), 0 3px 8px -3px rgba(10, 14, 35, .35);
  text-decoration: none !important;
  cursor: pointer;
}
.sv-primary:hover,
.sv-root button[style*="background: var(--terra)"]:hover, .sv-root a[style*="background: var(--terra)"]:hover,
.sv-root button[style*="background: var(--cta)"]:hover, .sv-root a[style*="background: var(--cta)"]:hover,
.lv-btn.terra:hover, .lv-btn.cta:hover { filter: brightness(.9); }
/* icons drawn in white follow the label colour (a light brand colour gets a dark label) */
.sv-primary [stroke="#FFFFFF"],
.sv-root button[style*="background: var(--terra)"] [stroke="#FFFFFF"], .sv-root a[style*="background: var(--terra)"] [stroke="#FFFFFF"],
.sv-root button[style*="background: var(--cta)"] [stroke="#FFFFFF"], .sv-root a[style*="background: var(--cta)"] [stroke="#FFFFFF"] { stroke: currentColor; }
.sv-primary:focus-visible,
.sv-root button[style*="background: var(--terra)"]:focus-visible, .sv-root a[style*="background: var(--terra)"]:focus-visible,
.sv-root button[style*="background: var(--cta)"]:focus-visible, .sv-root a[style*="background: var(--cta)"]:focus-visible,
.lv-btn.terra:focus-visible, .lv-btn.cta:focus-visible {
  outline: 3px solid var(--sv-focus) !important; outline-offset: 2px !important;
}

/* the tour's dark card: a light primary and an outlined secondary, with a white focus ring */
.sv-root .sv-on-dark.sv-primary, .sv-on-dark.sv-primary {
  background: #FFFFFF !important; color: #1D2951 !important; border: 2px solid #FFFFFF !important;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .45);
}
.sv-root .sv-on-dark.sv-primary:hover, .sv-on-dark.sv-primary:hover { background: #E8EAF2 !important; border-color: #E8EAF2 !important; filter: none; }
.sv-root .sv-on-dark.sv-secondary, .sv-on-dark.sv-secondary {
  background: transparent !important; color: #FFFFFF !important; border: 1.5px solid rgba(255, 255, 255, .8) !important;
}
.sv-on-dark.sv-secondary[disabled] { opacity: .45 !important; cursor: default !important; }
/* (0,4,0): beats the light-surface ring above, whose attribute selector also matches here */
.sv-root .sv-on-dark.sv-primary:focus-visible, .sv-root .sv-on-dark.sv-secondary:focus-visible,
.sv-on-dark.sv-primary:focus-visible, .sv-on-dark.sv-secondary:focus-visible { outline: 3px solid #FFFFFF !important; outline-offset: 3px !important; }
/* LC-2300: the phone sheet's scrolling text is keyboard-focusable. It is faded with a CSS mask,
   which would also hide its own outline, so its focus ring is drawn on the (unmasked) card, inset:
   white on the navy card (outside it would be white on the light page, under 3:1). */
[data-tour-card] [data-tour-body]:focus-visible { outline: none !important; }
[data-tour-card]:has([data-tour-body]:focus-visible) { outline: 3px solid #FFFFFF; outline-offset: -6px; }