:root {
    --base-font-size: 100%;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Asap", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-reading: 1.125rem;
    --text-lead: 1.25rem;
    --text-section: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    --text-hero: clamp(2.125rem, 1.5rem + 2vw, 3rem);
    --line-height-body: 1.5;
    --line-height-reading: 1.65;
    --line-height-heading: 1.2;
    --content-reading-width: 65ch;
    --content-heading-width: 24ch;
    --section-space: clamp(2rem, 1rem + 4vw, 4rem);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: var(--text-body);
    --bs-body-line-height: var(--line-height-body);
    /* Kiln palette. One warm set for every shell: Public, Customer and Employee
       share the same ground, ink, action, support and accent colors so a color
       has one meaning across the product. */
    --paper: #FAF7F2;
    --paper-deep: #F1EBE1;
    --ink: #2A2723;
    --primary-color: #BF311A;
    --slate: #333F47;
    --brass: #8A6220;
    --moss: #3F6B4F;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: 191, 49, 26;
    --primary-color-reverse: #FFFFFF;
    --header-color: #FFF;
    --header-color-reverse: #BF311A;
    --secondary-color: var(--ink);
    --bs-secondary: var(--secondary-color);
    --bs-secondary-rgb: 42, 39, 35;
    --bs-success: var(--moss);
    --bs-success-rgb: 63, 107, 79;
    --bs-link-color: var(--primary-color);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--slate);
    --bs-link-hover-color-rgb: 51, 63, 71;
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.35);
    --secondary-color-reverse: #FFFFFF;
    --gray-lightest: var(--paper-deep);
    --gray-light: #E4DCCE;
    --gray-medium: #B3A899;
    --gray-dark: #6E665C;
    --gray-darkest: #56504A;
    --white: #fefefe;
    /* Bootstrap foundation mappings. Previously Customer-only; every shell now
       resolves Bootstrap's own surfaces to the same palette. */
    --bs-body-color: var(--secondary-color);
    --bs-body-color-rgb: 42, 39, 35;
    --bs-body-bg: var(--paper);
    --bs-body-bg-rgb: 250, 247, 242;
    --bs-secondary-color: var(--gray-darkest);
    --bs-secondary-bg: var(--paper-deep);
    --bs-tertiary-bg: var(--paper);
    --bs-border-color: var(--gray-light);
    --bs-light-rgb: 241, 235, 225;
    --bs-dark-rgb: 42, 39, 35;
    --bs-emphasis-color: var(--secondary-color);
    --bs-emphasis-color-rgb: 42, 39, 35;
    --space-xs: 0.5rem;
    --space-sm: 1rem; /* 16px */
    --space-md: 1.5rem;
    --space-lg: 2rem;
}



html {
    font-size: var(--base-font-size);
    position: relative;
    min-height: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--line-height-body);
    background-color: var(--paper);
    color: var(--secondary-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--line-height-heading);
}

a { color: var(--primary-color); }
a:hover { color: var(--slate); }
label { margin-bottom: 5px; }

/* Editorial reading measures and display scale. The palette itself is now
   global, so this scope carries typography and width only. */
.editorial-theme {
    --font-display: var(--font-heading);
    /* rem measures do not vary with the font size of the consuming element. */
    --width-prose: 39.5rem;
    --width-grid: 58rem;
    --text-hero: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem);
    --text-section: clamp(1.65rem, 1.2rem + 1.5vw, 2.375rem);
}