/*
 * Link Resources design tokens.
 *
 * Every value here was measured off the live site at a 1440px viewport with a
 * 16px root, not chosen. Where a number looks odd (51.2px, 38.4px) that is the
 * real computed value, so it stays.
 */

:root {
    /* brand */
    --lr-red: #bf2428;
    --lr-red-dark: #a3191d;
    --lr-ink: #333;              /* body copy and most headings */
    --lr-ink-deep: #0c0b0b;      /* list items and sub-headings */
    --lr-ink-muted: #5a5858;
    --lr-white: #fff;
    --lr-surface: #f7f7f7;       /* hero band */
    --lr-border: #d5d5d5;
    --lr-border-strong: #9c9c9c;
    --lr-focus: #0c6ece;

    /* type: measured */
    --lr-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* The theme drives body and h1-h6 from these two and ships broken values
       (an HTML-escaped quote leaks into the CSS, so nothing resolves and the
       page falls back to Times). Redefining them here fixes the whole theme,
       not just our own components. */
    --body-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --header-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    --lr-h1-size: 51.2px;
    --lr-h1-lh: 56.32px;
    --lr-h1-weight: 800;

    --lr-h2-size: 38.4px;
    --lr-h2-lh: 42.24px;
    --lr-h2-weight: 700;

    --lr-h3-size: 38px;
    --lr-h3-lh: 41.8px;
    --lr-h3-weight: 600;
    --lr-h3-ls: 0;

    --lr-body-size: 16px;
    --lr-body-lh: 24px;

    --lr-list-size: 20px;
    --lr-list-lh: 30px;
    --lr-list-ls: 0;

    --lr-nav-size: 15px;
    --lr-nav-weight: 500;

    /* space */
    --lr-space-xs: 8px;
    --lr-space-sm: 12px;
    --lr-space-md: 20px;
    --lr-space-lg: 32px;
    --lr-space-xl: 56px;
    --lr-space-2xl: 92.7344px;   /* measured section rhythm */

    /* shape */
    --lr-radius: 10px;
    --lr-radius-pill: 40px;
    --lr-container: 1140px;
    --lr-gutter: 150px;
}

/* Production's type tiers, measured: H2 drops to 35 on laptop, H1 to 44 and
   H3 to 34.2 on tablet, and H2 32 / H3 28.8 on the phone. */
@media (max-width: 1366px) {
    :root {
        --lr-h2-size: 35px;
        --lr-h2-lh: 38.5px;
    }
}

@media (max-width: 1024px) {
    :root {
        --lr-h1-size: 44px;
        --lr-h1-lh: 48.4px;
        --lr-h3-size: 34.2px;
        --lr-h3-lh: 37.62px;
        --lr-list-size: 18px;
        --lr-list-lh: 27px;
        --lr-space-2xl: 72px;
        --lr-gutter: 4vw;
    }
}

@media (max-width: 767px) {
    :root {
        --lr-h2-size: 32px;
        --lr-h2-lh: 35.2px;
        --lr-h3-size: 28.8px;
        --lr-h3-lh: 32px;
    }
}