/* Farrar Analytics brand tokens: single source of truth for all pages.
   Colors sampled directly from the logo artwork (NewLogo.png).
   Load this BEFORE any page's own <style> block. */

:root {
    /* --- Core brand --- */
    --brand-navy: #001038;        /* "Farrar" wordmark, base of the F mark */
    --brand-navy-soft: #0a2050;   /* raised navy surfaces */
    --brand-blue: #0038DC;        /* "Analytics" wordmark, speech bubble, CTAs */
    --brand-blue-dark: #002CB0;   /* hover / pressed */
    --brand-blue-light: #0050D0;  /* light end of the F gradient, pixel scatter */
    --brand-gradient: linear-gradient(135deg, #001038 0%, #0050D0 100%);

    /* --- Semantic aliases (kept so existing page CSS keeps working) --- */
    --primary: var(--brand-blue);
    --primary-dark: var(--brand-blue-dark);
    --primary-light: var(--brand-blue-light);
    --dark: var(--brand-navy);

    /* Neutrals, cooled slightly so they sit with navy rather than fighting it */
    --gray-700: #3d4557;
    /* Body text. Darkened from #6b7386, which measured 4.19:1 on the --gray-100
       section tint and so failed WCAG AA (4.5:1), including on the hero subhead.
       #5f6779 is 5.01:1 on the tint, 5.67:1 on white. */
    --gray-500: #5f6779;
    --gray-300: #d3d8e2;
    --gray-100: #eef1f6;
    --white: #ffffff;

    /* Surfaces */
    --bg: #ffffff;
    --bg-tint: #f6f8fc;
    --border: #e2e7f0;
}

/* --- Shared components --- */

/* Reframing note at the top of archive posts written before the
   headless-reporting positioning. Keeps the ranking, fixes the message. */
.post-reframe {
    background: var(--gray-100);
    border-left: 3px solid var(--brand-blue);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0 0 28px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gray-700);
}

.post-reframe p { margin: 0; }
.post-reframe strong { color: var(--brand-navy); }
.post-reframe a { color: var(--brand-blue); font-weight: 600; }

@media (max-width: 768px) {
    .post-reframe { padding: 14px 16px; font-size: 0.9rem; margin-bottom: 22px; }
}