/** * Design tokens. * * Colours are taken from the BACKSLASH logotype files, not invented: * #0C444F deep teal (logo 03 / 06) * #C35A49 terracotta (logo 08 / 11) * #9DA3AA cool grey (logo 02 / 05) * #F4F3E9 warm paper (logo 01) * * Every text pairing below is measured against WCAG 2.2 AA. The measured ratio * is recorded next to each token so a future change can be checked, and so it * is obvious which tokens must never be used for body text. */ :root { /* ---------- brand ---------- */ --bsl-teal: #0c444f; --bsl-terracotta: #c35a49; --bsl-grey: #9da3aa; --bsl-paper: #f4f3e9; /* ---------- surfaces ---------- */ --bsl-bg: var(--bsl-paper); --bsl-bg-raised: #ffffff; --bsl-bg-sunken: #eceade; --bsl-bg-inverse: var(--bsl-teal); /* ---------- text ---------- */ --bsl-text: var(--bsl-teal); /* 9.64:1 on paper */ --bsl-text-muted: #40595f; /* 6.70:1 on paper */ --bsl-text-on-inverse: var(--bsl-paper); /* 9.64:1 on teal */ --bsl-text-muted-on-inverse: #b9c3c6; /* 6.40:1 on teal */ /* ---------- accent ---------- * --bsl-accent is 3.86:1 on paper: decorative, large text and non-text UI * only. Use --bsl-accent-text whenever the colour carries words. */ --bsl-accent: var(--bsl-terracotta); --bsl-accent-text: #b04a38; /* 4.85:1 on paper */ --bsl-accent-strong: #a8412f; /* 5.44:1 on paper */ --bsl-accent-on-inverse: #e8a499; /* 5.22:1 on teal */ /* ---------- links ---------- */ --bsl-link: var(--bsl-accent-text); --bsl-link-hover: var(--bsl-accent-strong); --bsl-link-visited: #8c4a63; /* 5.9:1 on paper */ /* ---------- lines ---------- * Borders and rules only. --bsl-line is 2.28:1 and must never carry text. */ --bsl-line: var(--bsl-grey); --bsl-line-soft: #d8d6c8; --bsl-line-strong: var(--bsl-teal); /* ---------- states ---------- */ --bsl-focus: #0b5fa5; /* 5.1:1 on paper, 3.3:1 on white */ --bsl-error: #9b2226; /* 6.9:1 on paper */ --bsl-error-bg: #fbeceb; --bsl-warning: #7a5202; /* 5.6:1 on paper */ --bsl-warning-bg: #fcf5e2; --bsl-success: #17604a; /* 6.2:1 on paper */ --bsl-success-bg: #e7f2ed; /* ---------- strategic area accents ---------- * One hue per area so the four areas stay recognisable across the site. * Used for rules, numerals and backgrounds — never as text on paper. */ --bsl-area-1: #b04a38; --bsl-area-2: #0c444f; --bsl-area-3: #4a6b52; --bsl-area-4: #6a5586; /* ---------- typography ---------- * Two families only. Both are self-hosted variable fonts under an open * licence (SIL OFL 1.1) and cover the full Latin range needed for English * and Spanish, including ñ, á-ú, ¿ and ¡. */ --bsl-font-sans: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bsl-font-display: "Fraunces var", "Fraunces", Georgia, "Times New Roman", serif; --bsl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid scale, 1.20 ratio at the small end and 1.25 at the large end. * clamp() means no JS and no layout jump between breakpoints. */ --bsl-text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem); --bsl-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --bsl-text-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem); --bsl-text-md: clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem); --bsl-text-lg: clamp(1.3125rem, 1.2rem + 0.55vw, 1.625rem); --bsl-text-xl: clamp(1.5rem, 1.32rem + 0.9vw, 2.125rem); --bsl-text-2xl: clamp(1.875rem, 1.55rem + 1.6vw, 2.875rem); --bsl-text-3xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem); --bsl-leading-tight: 1.12; --bsl-leading-snug: 1.25; --bsl-leading-normal: 1.6; --bsl-leading-relaxed: 1.7; --bsl-tracking-tight: -0.02em; --bsl-tracking-normal: 0; --bsl-tracking-wide: 0.06em; --bsl-weight-regular: 400; --bsl-weight-medium: 500; --bsl-weight-semibold: 600; --bsl-weight-bold: 700; /* ---------- space ---------- * A single 4px-based scale. Section rhythm is fluid so long pages breathe * on desktop without wasting space on a phone. */ --bsl-space-1: 0.25rem; --bsl-space-2: 0.5rem; --bsl-space-3: 0.75rem; --bsl-space-4: 1rem; --bsl-space-5: 1.5rem; --bsl-space-6: 2rem; --bsl-space-7: 2.5rem; --bsl-space-8: 3rem; --bsl-space-9: 4rem; --bsl-space-10: 5rem; --bsl-space-section: clamp(3rem, 2rem + 5vw, 6rem); /* ---------- measure and containers ---------- */ --bsl-measure: 68ch; /* comfortable reading width */ --bsl-measure-narrow: 56ch; --bsl-container: 76rem; --bsl-container-wide: 90rem; --bsl-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* ---------- shape ---------- * Restrained: a small radius on interactive surfaces, square everywhere * else. No blanket rounding, no heavy shadows. */ --bsl-radius-none: 0; --bsl-radius-sm: 2px; --bsl-radius: 4px; --bsl-radius-pill: 999px; --bsl-border-width: 1px; --bsl-border-width-thick: 2px; --bsl-rule: var(--bsl-border-width) solid var(--bsl-line-soft); --bsl-shadow-sm: 0 1px 2px rgba(12, 68, 79, 0.08); --bsl-shadow: 0 2px 8px rgba(12, 68, 79, 0.10); /* ---------- motion ---------- * Short, functional, and switched off entirely under * prefers-reduced-motion (see base.css). */ --bsl-duration-fast: 120ms; --bsl-duration: 180ms; --bsl-ease: cubic-bezier(0.2, 0, 0.38, 1); /* ---------- focus ring ---------- */ --bsl-focus-width: 3px; --bsl-focus-offset: 2px; /* ---------- z-index ---------- */ --bsl-z-header: 100; --bsl-z-menu: 110; --bsl-z-skip: 200; } /* * Dark surfaces reuse the same tokens with the roles swapped, so a section on * teal never needs its own colour values. */ .bsl-inverse { --bsl-bg: var(--bsl-bg-inverse); --bsl-bg-raised: #10525f; --bsl-bg-sunken: #093843; --bsl-text: var(--bsl-text-on-inverse); --bsl-text-muted: var(--bsl-text-muted-on-inverse); --bsl-link: var(--bsl-accent-on-inverse); --bsl-link-hover: #f2c7bf; --bsl-link-visited: var(--bsl-accent-on-inverse); --bsl-line-soft: rgba(244, 243, 233, 0.22); --bsl-line: rgba(244, 243, 233, 0.38); --bsl-focus: #9fd0ff; background-color: var(--bsl-bg); color: var(--bsl-text); }