/* Senders Design System — Colors & Type
 * Source: brand-specs.md, Senders Visual Identity Guidelines by Yoske Mitsui (2021)
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

:root {
  /* ── Primary ──────────────────────────────────────────── */
  --senders-blue: #0032A0;
  --white: #FFFFFF;

  /* ── Text ─────────────────────────────────────────────── */
  --fg1: #3E454C;            /* Primary body text — darkened from spec #7C878E */
  --fg2: #0032A0;            /* Heading text */
  --fg3: #7C878E;            /* Original spec gray, used sparingly for captions */
  --fg-invert: #FFFFFF;

  /* ── Supporting / Chart palette ───────────────────────── */
  --light-gray: #D0D3D4;     /* Borders, subtle backgrounds, alt rows */
  --light-blue: #71C5E8;     /* Charts, infographics, secondary accents */
  --purple: #753BBD;         /* Charts, callout boxes */
  --yellow: #CFB023;         /* Charts, warning highlights */
  --green: #00B140;          /* Charts, success states */

  /* ── Tints (brand-approved) ───────────────────────────── */
  --blue-10: #E6EAF3;        /* Summary row bg, subtle blue fill */
  --blue-20: #CCD5E6;
  --light-gray-30: #F0F1F1;
  --light-gray-50: #E8E9E9;
  --light-gray-10: #F3F4F4;  /* Alt table rows */

  /* ── Semantic surfaces ────────────────────────────────── */
  --bg: #FFFFFF;
  --bg-muted: #F3F4F4;
  --bg-accent: #E6EAF3;
  --bg-invert: #0032A0;
  --border: #D0D3D4;
  --rule: #0032A0;            /* Horizontal rules are blue in this brand */

  /* ── Type ─────────────────────────────────────────────── */
  --font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Document scale — ground truth from brand-specs.md */
  --fs-h1: 28pt;             /* 37px */
  --fs-h2: 18pt;             /* 24px */
  --fs-h3: 12pt;             /* 16px */
  --fs-body: 10pt;           /* 13.3px */
  --fs-caption: 8pt;
  --fs-small: 7pt;           /* header/footer */

  /* Presentation scale */
  --fs-slide-title: 36pt;
  --fs-slide-subtitle: 24pt;
  --fs-slide-body: 18pt;
  --fs-slide-caption: 14pt;

  /* Screen UI scale — derived for web, same proportions */
  --fs-display: 56px;
  --fs-title: 40px;
  --fs-h1-ui: 32px;
  --fs-h2-ui: 22px;
  --fs-h3-ui: 16px;
  --fs-body-ui: 15px;
  --fs-small-ui: 13px;
  --fs-micro-ui: 11px;

  /* Line heights from brand-specs */
  --lh-tight: 1.1;           /* H1/H2 */
  --lh-snug: 1.25;           /* H3 */
  --lh-normal: 1.4;          /* Body (14pt for 10pt body = 1.4) */
  --lh-loose: 1.6;

  /* Spacing (DXA → px rough analog; doc spacing expressed in units of 4px) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Borders / radii — brand is flat. No shadows, minimal rounding. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;            /* Max rounding — buttons/inputs */
  --border-1: 1px solid var(--light-gray);
  --border-rule: 2pt solid var(--senders-blue);

  /* Motion */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* ── Semantic element defaults ─────────────────────────── */
html, body {
  font-family: var(--font-primary);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h1-ui);
  line-height: var(--lh-tight);
  color: var(--fg2);
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-h2-ui);
  line-height: var(--lh-tight);
  color: var(--fg2);
  margin: var(--s-6) 0 var(--s-3);
}
h3, .h3 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-h3-ui);
  line-height: var(--lh-snug);
  color: var(--fg2);
  margin: var(--s-5) 0 var(--s-2);
}
p, li {
  font-size: var(--fs-body-ui);
  line-height: var(--lh-normal);
  color: var(--fg1);
}
.eyebrow, .kicker {
  font-weight: var(--font-weight-bold);
  font-size: var(--fs-small-ui);
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.caption {
  font-size: var(--fs-small-ui);
  color: var(--fg1);
}
strong, .strong {
  font-weight: var(--font-weight-bold);
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
code, kbd, samp, pre {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.92em;
  color: var(--fg2);
  background: var(--light-gray-10);
  padding: 1px 4px;
  border-radius: var(--radius-1);
}
hr, .rule-blue {
  border: 0;
  height: 2px;
  background: var(--senders-blue);
  margin: var(--s-4) 0;
}
a {
  color: var(--senders-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

/* "Looking for senders.co?" header pill — shows on desktop widths with room to
   spare. Below this it hides; the footer "senders.co (consultancy)" link is the
   all-widths fallback. */
@media (max-width: 1040px) {
  .hdr-altsite, .hdr-altdiv { display: none !important; }
}

/* X1.6 — mobile menu + tap targets. At ≤900px the desktop actions collapse to
   the burger; keep a compact human/AI toggle always visible in the header. */
@media (max-width: 900px) {
  .hdr-toggle-m { display: inline-flex !important; margin-left: auto; }
}
/* Comfortable tap targets on the primary CTAs and selectors on touch widths. */
@media (max-width: 760px) {
  .ask-row > a, .ask-row > button { min-height: 44px; }
}
/* The "how it goes" conversation goes full-width on narrow screens so the
   dialogue stays readable. */
@media (max-width: 620px) {
  .ask-row { width: 100%; }
  .ask-row > a, .ask-row > button { flex: 1 1 100%; }
}