/* tokens.css — Select Hearing brand tokens
   Sampled directly from the existing logo file. */
:root {
  /* Brand colors */
  --sh-blue-900: #05438b;   /* primary — "Select" wordmark + ear */
  --sh-blue-700: #11427a;
  --sh-blue-500: #2d91d5;   /* accent — middle soundwave */
  --sh-green-700: #2f7a35;
  --sh-green-600: #388e3c;  /* secondary — "Hearing" wordmark + outer soundwave */
  --sh-green-300: #b6d9a8;

  /* Neutrals (warm, not chain-cold gray) */
  --sh-ink:       #1a2438;   /* body text */
  --sh-ink-soft:  #4b5566;   /* secondary text */
  --sh-paper:     #ffffff;
  --sh-cream:     #f7f4ec;   /* warm section background */
  --sh-rule:      #e3dfd2;   /* hairlines on cream */
  --sh-rule-cool: #dde3ea;   /* hairlines on white */

  /* Type */
  --sh-sans: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sh-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;

  /* Scale (senior-audience friendly: body min 18px) */
  --sh-fs-body:   18px;
  --sh-fs-small:  15px;
  --sh-fs-large:  22px;
  --sh-fs-h3:     26px;
  --sh-fs-h2:     36px;
  --sh-fs-h1:     54px;
  --sh-fs-hero:   72px;

  /* Spacing */
  --sh-r:  10px;   /* card radius */
  --sh-r-sm: 6px;
  --sh-shadow-card: 0 1px 0 rgba(26,36,56,.04), 0 2px 8px rgba(26,36,56,.06);
  --sh-shadow-lift: 0 4px 24px rgba(26,36,56,.10);

  /* Layout */
  --sh-page: 1180px;
  --sh-gutter: 24px;
}

/* Base reset / typography */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sh-sans);
  color: var(--sh-ink);
  background: var(--sh-paper);
  font-size: var(--sh-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--sh-sans); color: var(--sh-blue-900); margin: 0 0 .4em; line-height: 1.12; letter-spacing: -0.015em; font-weight: 700; }
h1 { font-size: var(--sh-fs-h1); }
h2 { font-size: var(--sh-fs-h2); }
h3 { font-size: var(--sh-fs-h3); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 64ch; }
a { color: var(--sh-blue-900); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sh-blue-500); }
.eyebrow {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sh-green-700); font-weight: 700;
}
.lede { font-size: var(--sh-fs-large); line-height: 1.5; color: var(--sh-ink); max-width: 56ch; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--sh-r-sm);
  font-family: var(--sh-sans); font-weight: 700; font-size: 17px;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--sh-blue-900); color: #fff; }
.btn-primary:hover { background: var(--sh-blue-700); color: #fff; transform: translateY(-1px); box-shadow: var(--sh-shadow-lift); }
.btn-secondary { background: var(--sh-green-600); color: #fff; }
.btn-secondary:hover { background: var(--sh-green-700); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--sh-blue-900); border: 1.5px solid var(--sh-blue-900); }
.btn-ghost:hover { background: var(--sh-blue-900); color: #fff; }

/* Layout */
.wrap { max-width: var(--sh-page); margin: 0 auto; padding: 0 var(--sh-gutter); }
.section { padding: 80px 0; }
.section--cream { background: var(--sh-cream); }
.section--ink { background: var(--sh-blue-900); color: #f7f4ec; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a { color: #b6d9e8; }
.rule { height: 1px; background: var(--sh-rule-cool); margin: 0; border: 0; }