/* ========================================================================== National Deaf Education Data Index: "Ledger" palette layer (ndedi-theme) Loaded AFTER ncg-a11y.css + the parent ncg-theme style.css, so these win. Aligned to the publisher's Rural Modern scheme (ncg-theme): dark chrome, one warm accent, near-black type on warm paper. The publisher's Rural Modern structure, shifted to ink and amber. Redefines the ncg --ncg-color-* tokens for the a11y toolbar's three modes (default / dark / high-contrast, via html[data-ncg-theme=...]). Contrast targets, checked at generation: body and link text 4.5:1 or better, UI and focus 3:1 or better, text on the accent 4.5:1 or better. High-contrast is the plugin's black / white / yellow scheme (ncg-a11y.css forces links cyan and headings yellow with !important; this file only guarantees that the yellow buttons keep black text). Chrome tokens (--ncg-hero-*, --ncg-chrome) are MODE-STABLE so heroes, the CTA band, and the footer stay dark in every mode; high-contrast forces them black. Tokens the ncg-core/templates/ndedi/ pages read beyond the parent's set: --ncg-link, --ncg-focus, --ncg-accent-text, --ncg-accent-2, --ncg-chrome, --ncg-on-chrome, --ncg-hero-1/2/3, --ncg-chrome-accent, --ncg-on-accent. ========================================================================== */ /* ---- Base / light ----------------------------------------------------- */ :root { --ncg-color-primary: #1E2B45; /* deep ink navy, the Index's brand ink */ --ncg-color-secondary: #4B5B7A; /* slate blue */ --ncg-color-accent: #D4A24C; /* amber: button ground with ink text */ --ncg-on-accent: #1E2B45; /* text that sits ON the accent */ /* Accent that sits ON the dark chrome (heroes, CTA band, footer). */ --ncg-chrome-accent: #E6BC63; /* The accent as TEXT on the light ground (labels, hover, small type): the plain accent is a button color and is not legible as text on paper. */ --ncg-accent-text: #7A5410; --ncg-focus: #7A5410; /* focus ring: 3:1 or better against paper and white */ --ncg-color-heading: #050505; --ncg-color-body: #111111; --ncg-color-muted: #444444; --ncg-color-bg-paper: #F7F6F2; /* warm off-white, a shade cooler than NCG's */ --ncg-color-bg-surface: #FFFFFF; --ncg-color-border: #767676; /* 3:1 boundary on paper and white */ --ncg-link: #1E2B45; /* mode-stable chrome: ink into deep blue */ --ncg-hero-1: #1E2B45; --ncg-hero-2: #1B3550; --ncg-hero-3: #142A3E; --ncg-chrome: #141D30; --ncg-on-chrome: #FFFFFF; --ncg-accent-2: #5C8FBF; /* steel blue: card numbers, accent borders, the second voice */ --ndedi-hover-tint: rgba(122, 84, 16, 0.10); --ndedi-focus-glow: rgba(122, 84, 16, 0.25); } /* ---- Dark ------------------------------------------------------------- */ html[data-ncg-theme="dark"] { --ncg-color-primary: #A9C4E6; --ncg-color-secondary: #B3BFD3; --ncg-color-accent: #E6BC63; --ncg-on-accent: #1E2B45; --ncg-chrome-accent: #E6BC63; --ncg-accent-text: #E6BC63; --ncg-focus: #E6BC63; --ncg-color-heading: #FAFAFA; --ncg-color-body: #E4E4E4; --ncg-color-muted: #B7B7B7; --ncg-color-bg-paper: #14181F; --ncg-color-bg-surface: #1E2430; --ncg-color-border: #6B7686; /* raised from the parent's #5A5A5A, which is 2.4:1 on this ground */ --ncg-link: #A9C4E6; --ncg-hero-1: #0E131C; --ncg-hero-2: #15243A; --ncg-hero-3: #101C2B; --ncg-chrome: #0E131C; --ncg-on-chrome: #FFFFFF; --ncg-accent-2: #8FB8E0; } /* ---- HIGH CONTRAST: black / white / yellow ---------------------------- */ html[data-ncg-theme="high-contrast"] { --ncg-color-primary: #FFFFFF; --ncg-color-secondary: #FFFFFF; --ncg-color-accent: #FFFF00; --ncg-on-accent: #000000; --ncg-chrome-accent: #FFFF00; --ncg-accent-text: #FFFF00; --ncg-focus: #FFFF00; --ncg-color-heading: #FFFFFF; --ncg-color-body: #FFFFFF; --ncg-color-muted: #FFFFFF; --ncg-color-bg-paper: #000000; --ncg-color-bg-surface: #000000; --ncg-color-border: #FFFFFF; --ncg-link: #FFFF00; --ncg-hero-1: #000000; --ncg-hero-2: #000000; --ncg-hero-3: #000000; --ncg-chrome: #000000; --ncg-on-chrome: #FFFFFF; --ncg-accent-2: #FFFF00; --ndedi-hover-tint: transparent; --ndedi-focus-glow: transparent; } /* ========================================================================== PAGE SURFACES: body follows the tokens in light mode too (the parent already handles dark via html[data-ncg-theme="dark"] body). ========================================================================== */ body { background-color: var(--ncg-color-bg-paper); color: var(--ncg-color-body); margin: 0; } /* Nothing upstream resets box-sizing, and the parent gives .site-footer-legal width: 100% while this file gives it side padding: border-box keeps the header and footer inside the viewport at every width. */ .site-header, .site-footer, .ndedi-footer * { box-sizing: border-box; } /* ========================================================================== LINKS: the parent points a{} at --primary and hover at the plain accent, which is a button color, not a text color. Hover uses the text-safe accent. Underline is inherited from the parent (kept for color-blind users). ========================================================================== */ a { color: var(--ncg-link); } a:hover, a:focus { color: var(--ncg-accent-text); background-color: var(--ndedi-hover-tint); } /* ========================================================================== FOCUS + SKIP LINK: the plugin's copper focus ring is 2.3:1 on paper; use the dedicated focus token (dark accent in light mode, light accent in dark). ========================================================================== */ .ncg-skip-link { background: var(--ncg-chrome) !important; color: var(--ncg-on-chrome) !important; } :focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible, .ncg-skip-link:focus { outline-color: var(--ncg-focus) !important; } html[data-ncg-theme="high-contrast"] :focus-visible { outline-color: #FFFF00 !important; } /* The plugin's high-contrast rules force every cyan and every