/*
 * SJ Stickys design tokens - Scott's brand pack (v2.0.0).
 * Brand has no warm accent: navy + teal + supporting greys.
 * Teal owns presence AND action - eyebrows, hover, CTAs all share the brand teal.
 * Buttons with white text MUST use --brand-accent-btn for hover/active states.
 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rubik/rubik-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rubik/rubik-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rubik/rubik-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rubik/rubik-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rubik/rubik-700i.woff2') format('woff2');
}

:root {
  --brand-primary:    #172B4E;  /* navy - Pantone 540 C */
  --brand-secondary:  #2E696B;  /* teal - Pantone 7716 C */
  --brand-accent:     #2E696B;  /* same teal; brand has no warm accent */
  --brand-accent-btn: #1E4F52;  /* darker teal for button hover/active */
  --brand-ink-strong: #172B4E;  /* navy doubles as deepest ink */
  --brand-blue-grey:  #779397;  /* Pantone 7543 C - secondary text on light bg */
  --brand-grey-10:    #757779;  /* Pantone Cool Gray 10 C */
  --brand-grey-432:   #49575A;  /* Pantone 432 C - body ink alternative */
  --brand-grey-1:     #E6E8E9;  /* Pantone Cool Gray 1 C - section background */

  --ink-strong:       #172B4E;  /* alias of brand-primary */
  --ink-body:         #49575A;  /* Pantone 432 C - body copy */
  --surface-grey:     #E6E8E9;  /* light section background, Cool Gray 1 */
  --surface-dark:     #0B1830;  /* gradient start, deeper than brand-primary */

  --wp--style--global--content-size: 1140px;
  --wp--style--global--wide-size:    1400px;
}

body {
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--ink-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Rubik', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  color: var(--ink-strong);
  line-height: 1.15;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 2px;
}