/* ============================================================================ maineaa — design tokens (Phase 1) Maine AA Area 28 · GeneratePress child theme ---------------------------------------------------------------------------- All color values are REAL, computed literals. Every guarded (derived) token carries its achieved WCAG 2.1 contrast ratio inline. Contrast method (WCAG 2.1, SC 1.4.3 body text 4.5:1 / SC 1.4.11 non-text 3.0:1): c = C/255; cl = c/12.92 if c<=0.03928 else ((c+0.055)/1.055)^2.4 L = 0.2126*R + 0.7152*G + 0.0722*B ; ratio = (Llight+0.05)/(Ldark+0.05) Verified in Python (see .scratch/contrast.py). Full table: .scratch/contrast-report.md Cascade: :root → mode/preset-independent scales [data-maineaa-font="…"] → font-family pair :root / [data-maineaa-preset="…"] → color tokens (LIGHT default) @media(prefers-color-scheme:dark) + [data-theme] → color tokens (DARK) Force a mode with [data-theme="light"|"dark"] on ; otherwise the OS preference drives it. DARK values are design judgment within the AA constraint — flagged for sign-off. ============================================================================ */ /* ---------------------------------------------------------------- SCALES Mode- and preset-independent. Emitted once. */ :root { color-scheme: light dark; --maineaa-font-scale: 1; /* spacing — 4px base, rem */ --maineaa-space-1: .25rem; /* 4px */ --maineaa-space-2: .5rem; /* 8px */ --maineaa-space-3: .75rem; /* 12px */ --maineaa-space-4: 1rem; /* 16px */ --maineaa-space-5: 1.5rem; /* 24px */ --maineaa-space-6: 2rem; /* 32px */ --maineaa-space-7: 3rem; /* 48px */ --maineaa-space-8: 4rem; /* 64px */ /* radius */ --maineaa-radius-sm: 8px; --maineaa-radius: 12px; --maineaa-radius-lg: 16px; --maineaa-radius-pill: 100px; /* fluid type — modular ratio 1.2, body 1rem→1.125rem, fluid 320px→1280px */ --maineaa-text-sm: clamp(0.8333rem, 0.7986rem + 0.174vw, 0.9375rem); /* step -1 · caption */ --maineaa-text-base: clamp(1rem, 0.9583rem + 0.208vw, 1.125rem); /* step 0 · body */ --maineaa-text-md: clamp(1.2rem, 1.15rem + 0.25vw, 1.35rem); /* step 1 */ --maineaa-text-lg: clamp(1.44rem, 1.38rem + 0.3vw, 1.62rem); /* step 2 */ --maineaa-text-xl: clamp(1.728rem, 1.656rem + 0.36vw, 1.944rem); /* step 3 */ --maineaa-text-2xl: clamp(2.0736rem, 1.9872rem + 0.432vw, 2.3328rem); /* step 4 */ --maineaa-text-3xl: clamp(2.4883rem, 2.3846rem + 0.518vw, 2.7994rem); /* step 5 · hero */ /* shadows — LIGHT default (cool ink-tinted, soft). Dark overrides below. */ --maineaa-shadow-sm: 0 1px 2px rgba(15,42,56,.06), 0 1px 1px rgba(15,42,56,.04); --maineaa-shadow-md: 0 2px 4px rgba(15,42,56,.07), 0 6px 16px rgba(15,42,56,.06); --maineaa-shadow-lg: 0 12px 28px rgba(15,42,56,.12), 0 4px 10px rgba(15,42,56,.08); /* default font pair (traditional) — overridden by [data-maineaa-font] */ --maineaa-font-body: "Source Sans 3", system-ui, sans-serif; --maineaa-font-display: "Libre Baskerville", Georgia, serif; } /* ---------------------------------------------------------------- FONT PRESETS */ :root[data-maineaa-font="modern"] { --maineaa-font-body: "Manrope", system-ui, sans-serif; --maineaa-font-display: "Syne", system-ui, sans-serif; } :root[data-maineaa-font="traditional"] { --maineaa-font-body: "Source Sans 3", system-ui, sans-serif; --maineaa-font-display: "Libre Baskerville", Georgia, serif; } /* ============================================================================ PRESET: teal-gold ============================================================================ */ /* ------------------------------------------------ teal-gold · LIGHT (default) */ :root, :root[data-maineaa-preset="teal-gold"] { --maineaa-bg: #f3efe8; --maineaa-surface: #fff9f1; --maineaa-soft: #edf6f9; --maineaa-ink: #1f2f38; /* 13.19:1 on surface ✓ */ --maineaa-muted: #53636c; /* 5.96:1 on surface ✓ */ --maineaa-dim: #78818a; /* 3.78:1 on surface ✓ (target 3.0) */ --maineaa-brand: #0e6a86; --maineaa-brand-dark: #09536b; --maineaa-on-brand: #ffffff; /* 6.13:1 on brand ✓ */ --maineaa-brand-text: #0e6a86; /* 5.86:1 on surface ✓ */ --maineaa-accent: #d68c1f; /* GOLD */ --maineaa-on-accent: #1f2f38; /* 5.01:1 on gold ✓ */ --maineaa-line: rgba(15,42,56,.12); /* decorative hairline — not contrast-bound */ --maineaa-border-strong: #828990; /* 3.38:1 on surface, 3.09:1 on bg ✓ (target 3.0) */ } /* ------------------------------------------------ teal-gold · DARK Design judgment within AA — warm off-white ink on teal-tinted charcoal. FOR SIGN-OFF. Also carries the mode-aware (glow-free) dark shadows via the non-preset selector, so both presets inherit them in dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root[data-maineaa-preset="teal-gold"]:not([data-theme="light"]) { --maineaa-bg: #0f191e; --maineaa-surface: #16242b; --maineaa-soft: #122630; --maineaa-ink: #f1e9dd; /* 13.2:1 on surface ✓ (warm off-white, not #fff) */ --maineaa-muted: #aeb7bd; /* 7.8:1 on surface ✓ */ --maineaa-dim: #8b969c; /* 5.25:1 on surface ✓ (target 3.0) */ --maineaa-brand: #0e6a86; --maineaa-brand-dark: #084c62; --maineaa-on-brand: #f1e9dd; /* 5.09:1 on brand ✓ */ --maineaa-brand-text: #57c1df; /* 7.64:1 on surface ✓ (lightened teal) */ --maineaa-accent: #e0a13a; /* GOLD, gently lifted for dark ground */ --maineaa-on-accent: #1f2f38; /* 6.13:1 on gold ✓ */ --maineaa-line: rgba(240,235,225,.14); /* decorative — not contrast-bound */ --maineaa-border-strong: #66757d; /* 3.33:1 on surface, 3.74:1 on bg ✓ (target 3.0) */ /* mode-aware shadows — glow-free, deeper alpha on black */ --maineaa-shadow-sm: 0 1px 2px rgba(0,0,0,.45); --maineaa-shadow-md: 0 3px 10px rgba(0,0,0,.55); --maineaa-shadow-lg: 0 14px 34px rgba(0,0,0,.65); } } :root[data-theme="dark"], :root[data-maineaa-preset="teal-gold"][data-theme="dark"] { --maineaa-bg: #0f191e; --maineaa-surface: #16242b; --maineaa-soft: #122630; --maineaa-ink: #f1e9dd; /* 13.2:1 on surface ✓ */ --maineaa-muted: #aeb7bd; /* 7.8:1 on surface ✓ */ --maineaa-dim: #8b969c; /* 5.25:1 on surface ✓ (target 3.0) */ --maineaa-brand: #0e6a86; --maineaa-brand-dark: #084c62; --maineaa-on-brand: #f1e9dd; /* 5.09:1 on brand ✓ */ --maineaa-brand-text: #57c1df; /* 7.64:1 on surface ✓ */ --maineaa-accent: #e0a13a; /* GOLD */ --maineaa-on-accent: #1f2f38; /* 6.13:1 on gold ✓ */ --maineaa-line: rgba(240,235,225,.14); --maineaa-border-strong: #66757d; /* 3.33:1 on surface, 3.74:1 on bg ✓ */ --maineaa-shadow-sm: 0 1px 2px rgba(0,0,0,.45); --maineaa-shadow-md: 0 3px 10px rgba(0,0,0,.55); --maineaa-shadow-lg: 0 14px 34px rgba(0,0,0,.65); } /* ============================================================================ PRESET: teal-orange Shared (bg/surface/ink/…) values are identical to teal-gold; only accent + on-accent differ. Re-declared in full so each preset block is self-contained. ============================================================================ */ /* ------------------------------------------------ teal-orange · LIGHT */ :root[data-maineaa-preset="teal-orange"] { --maineaa-bg: #f3efe8; --maineaa-surface: #fff9f1; --maineaa-soft: #edf6f9; --maineaa-ink: #1f2f38; /* 13.19:1 on surface ✓ */ --maineaa-muted: #53636c; /* 5.96:1 on surface ✓ */ --maineaa-dim: #78818a; /* 3.78:1 on surface ✓ (target 3.0) */ --maineaa-brand: #0e6a86; --maineaa-brand-dark: #09536b; --maineaa-on-brand: #ffffff; /* 6.13:1 on brand ✓ */ --maineaa-brand-text: #0e6a86; /* 5.86:1 on surface ✓ */ --maineaa-accent: #f08c3a; /* ORANGE */ --maineaa-on-accent: #1f2f38; /* 5.6:1 on orange ✓ */ --maineaa-line: rgba(15,42,56,.12); --maineaa-border-strong: #828990; /* 3.38:1 on surface, 3.09:1 on bg ✓ (target 3.0) */ } /* ------------------------------------------------ teal-orange · DARK (sign-off) */ @media (prefers-color-scheme: dark) { :root[data-maineaa-preset="teal-orange"]:not([data-theme="light"]) { --maineaa-bg: #0f191e; --maineaa-surface: #16242b; --maineaa-soft: #122630; --maineaa-ink: #f1e9dd; /* 13.2:1 on surface ✓ */ --maineaa-muted: #aeb7bd; /* 7.8:1 on surface ✓ */ --maineaa-dim: #8b969c; /* 5.25:1 on surface ✓ (target 3.0) */ --maineaa-brand: #0e6a86; --maineaa-brand-dark: #084c62; --maineaa-on-brand: #f1e9dd; /* 5.09:1 on brand ✓ */ --maineaa-brand-text: #57c1df; /* 7.64:1 on surface ✓ */ --maineaa-accent: #f2933f; /* ORANGE, gently lifted for dark ground */ --maineaa-on-accent: #1f2f38; /* 5.93:1 on orange ✓ */ --maineaa-line: rgba(240,235,225,.14); --maineaa-border-strong: #66757d; /* 3.33:1 on surface, 3.74:1 on bg ✓ */ } } :root[data-maineaa-preset="teal-orange"][data-theme="dark"] { --maineaa-bg: #0f191e; --maineaa-surface: #16242b; --maineaa-soft: #122630; --maineaa-ink: #f1e9dd; /* 13.2:1 on surface ✓ */ --maineaa-muted: #aeb7bd; /* 7.8:1 on surface ✓ */ --maineaa-dim: #8b969c; /* 5.25:1 on surface ✓ (target 3.0) */ --maineaa-brand: #0e6a86; --maineaa-brand-dark: #084c62; --maineaa-on-brand: #f1e9dd; /* 5.09:1 on brand ✓ */ --maineaa-brand-text: #57c1df; /* 7.64:1 on surface ✓ */ --maineaa-accent: #f2933f; /* ORANGE */ --maineaa-on-accent: #1f2f38; /* 5.93:1 on orange ✓ */ --maineaa-line: rgba(240,235,225,.14); --maineaa-border-strong: #66757d; /* 3.33:1 on surface, 3.74:1 on bg ✓ */ }