/* ============================================================================= ISPF THEME — runtime palette-switching token system ----------------------------------------------------------------------------- Pages reference ONLY the SEMANTIC tokens below for color. Five palettes are selected at runtime via [data-theme="..."] on ; switcher.js sets it. blue — original brand book (teal + sky + navy dark sections) dark-teal — teal brand, deep-teal dark sections light1 — current approved palette (DEFAULT on :root) light2 — brighter green light3 — soft mint, lightest COLOR CONTRACT (the ONLY color tokens a page may use): Roles : --brand --brand-strong --accent --accent-strong --cta --cta-text --link --link-hover --text --text-strong --text-muted --text-on-dark --bg --bg-subtle --surface --surface-2 --border --border-subtle --focus-ring Sections (FLIP light/dark per theme): --hero-bg --hero-text --hero-accent --band-bg --band-text --band-eyebrow --footer-bg --footer-text Display: --ochre --ochre-on ACCESSIBILITY: every palette keeps WCAG 2.1 AA for body text, links, and UI. Small colored text / links use accessible darker variants; amber/ochre fills carry dark text. EXCEPTION (owner-approved): the big display stat numbers use the signature amber --ochre #E69A2D everywhere for brand consistency. On the deep-teal impact band that is 4.27:1 (AA-large); on light surfaces it sits below the AA-large threshold by deliberate design choice (preferred over a dark/teal numeral). It is never the burnt-orange that read as red. ========================================================================== */ /* =========================================================================== 1. SEMANTIC COLOR CONTRACT — DEFAULT (= light1, the approved palette) :root carries light1 so a page with no data-theme renders the approved look. Each [data-theme] block below overrides ONLY these semantic tokens. ========================================================================= */ :root { /* Brand / accent roles */ --brand: #238E95; /* logo teal — fills/large only */ --brand-strong: #1F6E74; /* brand for text/dense use — 5.93:1 on white AA */ --accent: #1F6E74; /* light1 accent = accessible teal */ --accent-strong: #175F64; /* 7.35:1 on white AA */ /* Calls to action */ --cta: #E69A2D; /* signature amber fill */ --cta-text: #222222; /* charcoal label on amber — 6.84:1 on #E69A2D AA-small */ /* Links */ --link: #1F6E74; /* 5.93:1 on white AA */ --link-hover: #175F64; /* 7.35:1 on white AA */ /* Text */ --text: #333333; /* body — 12.63:1 on white AA */ --text-strong: #124A4D; /* headings — deep teal 9.94:1 AA */ --text-muted: #6E6E6E; /* secondary — 4.9:1 on white AA */ --text-on-dark: #FFFFFF; /* text on any dark fill */ /* Backgrounds & surfaces */ --bg: #FFFFFF; --bg-subtle: #F5F5F5; --surface: #FFFFFF; --surface-2: #EDF6F7; /* tinted card / inset surface */ /* Borders & focus */ --border: #CCCCCC; --border-subtle: #D4D6E6; --focus-ring: #238E95; /* --- Section tokens (FLIP per theme). light1 = LIGHT bands, dark footer --- */ --hero-bg: #EDF6F7; --hero-text: #124A4D; --hero-accent: #1F6E74; --band-bg: #EDF6F7; --band-text: #124A4D; --band-eyebrow: #1F6E74; --footer-bg: #124A4D; /* the one dark anchor in light themes */ --footer-text: #FFFFFF; /* --- Display stat numbers: signature amber (owner-approved brand choice) --- */ --ochre: #E69A2D; /* amber: 4.27:1 on deep-teal bands; brand amber on light */ --ochre-on: #1A1A1A; /* dark text on an ochre fill */ /* ========================================================================= SPACING / TYPE / RADIUS / SHADOW / MOTION (copied from tokens.css so a page is self-sufficient with theme.css alone). These DO NOT vary by theme. ======================================================================= */ /* Font families */ --font-display: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --font-body: "Noto Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; /* Fluid type scale */ --fs-display: clamp(2.75rem, 1.6rem + 5.1vw, 5.5rem); --fs-h1: clamp(2.25rem, 1.5rem + 3.3vw, 3.75rem); --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); --fs-h3: clamp(1.4375rem, 1.15rem + 1.3vw, 2rem); --fs-h4: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem); --fs-h5: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --fs-h6: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --fs-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --fs-caption: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem); --fs-overline: 0.75rem; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Line heights */ --lh-tight: 1.05; --lh-heading: 1.15; --lh-snug: 1.3; --lh-body: 1.65; --lh-relaxed: 1.8; /* Letter spacing */ --ls-display: -0.02em; --ls-heading: -0.01em; --ls-body: 0em; --ls-wide: 0.04em; --ls-overline: 0.14em; /* Measure */ --measure: 66ch; --measure-narrow: 48ch; /* Spacing — 4px base scale */ --space-0: 0; --space-px: 1px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-section: clamp(3.5rem, 2rem + 7vw, 8rem); --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem); /* Radii */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-pill: 999px; --radius-circle: 50%; /* Shadows (deep-teal tinted) */ --shadow-soft: 0 1px 2px rgba(18,74,77,.06), 0 2px 6px rgba(18,74,77,.08); --shadow-elevated: 0 4px 12px rgba(18,74,77,.10), 0 12px 28px rgba(18,74,77,.12); --shadow-overlay: 0 16px 48px rgba(14,60,63,.22); --shadow-brand: 0 6px 20px rgba(35,142,149,.28); --shadow-accent: 0 6px 20px rgba(230,154,45,.30); --shadow-focus: 0 0 0 3px rgba(35,142,149,.45); --shadow-inset: inset 0 1px 2px rgba(18,74,77,.08); /* Border widths */ --bw-hairline: 1px; --bw-thin: 1px; --bw-thick: 2px; --bw-heavy: 4px; /* Focus ring metrics */ --focus-ring-width: 3px; --focus-ring-offset: 2px; /* Z-index */ --z-base: 0; --z-raised: 10; --z-dropdown: 1000; --z-sticky: 1100; --z-header: 1200; --z-overlay: 1300; --z-modal: 1400; --z-popover: 1500; --z-toast: 1600; --z-tooltip: 1700; --z-switcher: 1650; /* palette switcher (above toast, below tooltip) */ /* Layout containers */ --container-xs: 30rem; --container-sm: 40rem; --container-md: 48rem; --container-lg: 64rem; --container-xl: 75rem; --container-2xl: 87.5rem; --container-full: 100%; /* Motion */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-slower: 650ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --transition-colors: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); /* Editorial paper tones (page background; warm off-white, theme-neutral) */ --paper: #FCFBF8; --paper-grain: #F8F5EF; --edge: clamp(1.25rem, 1rem + 3vw, 5rem); } /* =========================================================================== 2. PALETTE OVERRIDES (each block re-defines ONLY the semantic contract) ========================================================================= */ /* ---- BLUE — original brand book (teal + sky + navy) -------------------- */ /* DARK hero & bands (navy), navy footer. AA verified: brand-strong #2C7177 5.62:1, accent-strong #127FB0 4.48:1 (large/links), navy #272B66 12.93:1, white-on-navy 12.93:1, cta-text #222 on amber 7.02:1. */ [data-theme="blue"] { --brand: #3E9DA3; --brand-strong: #2C7177; /* 5.62:1 on white AA */ --accent: #169CD8; /* sky — fill/large only (2.96:1) */ --accent-strong: #127FB0; /* 4.48:1 on white — links/large AA */ --cta: #DEA057; --cta-text: #222222; /* charcoal on amber — 7.02:1 on #DEA057 AA-small */ --link: #127FB0; /* sky link, 4.48:1 large AA */ --link-hover: #0F6A93; --text: #2F3340; --text-strong: #272B66; /* navy — 12.93:1 AA */ --text-muted: #5A5E72; --text-on-dark: #FFFFFF; --bg: #FFFFFF; --bg-subtle: #F4F6FB; --surface: #FFFFFF; --surface-2: #EAF0FA; --border: #CBD2E6; --border-subtle: #DDE3F0; --focus-ring: #169CD8; /* DARK sections: navy, white text */ --hero-bg: linear-gradient(135deg, #272B66 0%, #2C7177 100%); --hero-text: #FFFFFF; --hero-accent: #8FD3F4; /* light sky accent on navy */ --band-bg: #272B66; --band-text: #FFFFFF; --band-eyebrow: #8FD3F4; --footer-bg: #272B66; --footer-text: #FFFFFF; --ochre: #E69A2D; --ochre-on: #1A1A1A; } /* ---- DARK-TEAL — teal brand, deep-teal dark sections ------------------- */ /* DARK hero & bands (deep-teal #124A4D), white text. AA verified: brand-strong #1F6E74 5.93:1, cta-text #222 on amber 6.84:1 (AA-small), white-on-#124A4D 9.94:1. */ [data-theme="dark-teal"] { --brand: #238E95; --brand-strong: #1F6E74; /* 5.93:1 AA */ --accent: #238E95; --accent-strong: #175F64; /* 7.35:1 AA */ --cta: #E69A2D; --cta-text: #222222; /* charcoal on amber — 6.84:1 on #E69A2D AA-small */ --link: #1F6E74; --link-hover: #175F64; --text: #2D3536; --text-strong: #124A4D; /* 9.94:1 AA */ --text-muted: #5E6B6C; --text-on-dark: #FFFFFF; --bg: #FFFFFF; --bg-subtle: #F2F7F7; --surface: #FFFFFF; --surface-2: #E6F1F1; --border: #C6D6D6; --border-subtle: #D8E5E5; --focus-ring: #238E95; /* DARK sections: deep teal, white text */ --hero-bg: linear-gradient(135deg, #124A4D 0%, #1B7378 100%); --hero-text: #FFFFFF; --hero-accent: #A3D0D2; /* soft aqua accent on deep teal */ --band-bg: #124A4D; --band-text: #FFFFFF; --band-eyebrow: #A3D0D2; --footer-bg: #124A4D; --footer-text: #FFFFFF; --ochre: #E69A2D; --ochre-on: #1A1A1A; } /* ---- LIGHT1 — current approved palette (explicit; mirrors :root) ------- */ [data-theme="light1"] { --brand: #238E95; --brand-strong: #1F6E74; --accent: #1F6E74; --accent-strong: #175F64; --cta: #E69A2D; --cta-text: #222222; /* charcoal on amber — 6.84:1 on #E69A2D AA-small */ --link: #1F6E74; --link-hover: #175F64; --text: #333333; --text-strong: #124A4D; --text-muted: #6E6E6E; --text-on-dark: #FFFFFF; --bg: #FFFFFF; --bg-subtle: #F5F5F5; --surface: #FFFFFF; --surface-2: #EDF6F7; --border: #CCCCCC; --border-subtle: #D4D6E6; --focus-ring: #238E95; /* LIGHT sections, dark footer anchor */ --hero-bg: #EDF6F7; --hero-text: #124A4D; --hero-accent: #1F6E74; --band-bg: #EDF6F7; --band-text: #124A4D; --band-eyebrow: #1F6E74; --footer-bg: #124A4D; --footer-text: #FFFFFF; --ochre: #E69A2D; --ochre-on: #1A1A1A; } /* ---- LIGHT2 — brighter green ------------------------------------------- */ /* brand #2BA39A (fill/large, 3.08:1); text/links via brand-strong #1B7378 5.57:1 AA. Light bands, dark footer. */ [data-theme="light2"] { --brand: #2BA39A; --brand-strong: #1B7378; /* 5.57:1 AA */ --accent: #1B7378; --accent-strong: #155C60; --cta: #E69A2D; --cta-text: #222222; /* charcoal on amber — 6.84:1 on #E69A2D AA-small */ --link: #1B7378; --link-hover: #155C60; --text: #313838; --text-strong: #124A4D; --text-muted: #66706F; --text-on-dark: #FFFFFF; --bg: #FFFFFF; --bg-subtle: #F1F8F6; --surface: #FFFFFF; --surface-2: #E3F5F2; --border: #C8DEDA; --border-subtle: #DAEDE9; --focus-ring: #2BA39A; /* LIGHT sections, dark footer */ --hero-bg: #E3F5F2; --hero-text: #124A4D; --hero-accent: #1B7378; --band-bg: #E3F5F2; --band-text: #124A4D; --band-eyebrow: #1B7378; --footer-bg: #124A4D; --footer-text: #FFFFFF; --ochre: #E69A2D; --ochre-on: #1A1A1A; } /* ---- LIGHT3 — soft mint, lightest -------------------------------------- */ /* teal accents only; surfaces soft mint. Bands #A3D0D2 / #D3E8EA carry deep-teal text (#124A4D): 5.92:1 / 7.81:1 AA. Dark footer. */ [data-theme="light3"] { --brand: #238E95; --brand-strong: #1F6E74; --accent: #1F6E74; --accent-strong: #175F64; --cta: #E69A2D; --cta-text: #222222; /* charcoal on amber — 6.84:1 on #E69A2D AA-small */ --link: #1F6E74; --link-hover: #175F64; --text: #333333; --text-strong: #124A4D; --text-muted: #6E6E6E; --text-on-dark: #FFFFFF; --bg: #FFFFFF; --bg-subtle: #EDF6F7; --surface: #FFFFFF; --surface-2: #D3E8EA; --border: #BFDCDD; --border-subtle: #D3E8EA; --focus-ring: #238E95; /* LIGHT sections (soft mint), dark footer */ --hero-bg: #D3E8EA; --hero-text: #124A4D; --hero-accent: #1F6E74; --band-bg: #A3D0D2; --band-text: #124A4D; --band-eyebrow: #155C60; /* darker on the deeper aqua band */ --footer-bg: #124A4D; --footer-text: #FFFFFF; --ochre: #E69A2D; --ochre-on: #1A1A1A; } /* Honor reduced-motion: zero out theme-consumer transition durations. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } }