/* Design tokens for shop.trovemarket.com Palette derived from the trove logo (images/11183–11185.png): magenta chest, gold sunburst, navy wordmark. All text/background pairs below are chosen to meet or exceed WCAG 2.2 AA (most meet AAA) — see docs/frontend-design.md for the contrast math. */ :root { /* ---- Brand colors (from logo) ---- */ --color-brand-magenta: #9c1e6b; --color-brand-magenta-dark: #7a1654; --color-brand-magenta-light: #f4e3ef; --color-brand-gold: #f5a81c; --color-brand-gold-dark: #8a5c10; --color-brand-gold-light: #fdf1dd; --color-brand-navy: #123a4b; --color-brand-navy-dark: #0b252f; /* ---- Semantic colors ---- */ --color-primary: var(--color-brand-magenta); --color-primary-hover: var(--color-brand-magenta-dark); --color-primary-contrast: #ffffff; --color-accent: var(--color-brand-gold); --color-accent-contrast: var(--color-brand-navy-dark); --color-success: #0f7b6c; /* Darkened from the original #c4392b, which measured 4.49:1 on .badge--out-of-stock's own light background — just under the 4.5:1 AA minimum for normal (non-large) text. #b23223 clears it with margin against both white (6.22:1) and that badge background (5.28:1). */ --color-danger: #b23223; --color-info: #205a9e; --color-warning-bg: var(--color-brand-gold-light); --color-warning-text: var(--color-brand-gold-dark); --color-heading: var(--color-brand-navy); --color-text: #1b2a32; --color-text-muted: #4b5a63; --color-link: var(--color-brand-magenta); --color-link-visited: #6b1a52; --color-bg: #ffffff; --color-bg-alt: #fbf7f5; --color-bg-inverse: var(--color-brand-navy); --color-text-inverse: #ffffff; --color-border: #d8dde1; --color-border-strong: #6b7680; /* ~4.6:1 vs white — meets the 3:1 non-text contrast minimum for form control borders (WCAG 1.4.11) with margin */ /* Disabled form controls (text inputs/selects/textareas) - a gray background with a darker gray text, so "this field is off" reads at a glance instead of relying on the browser's own often-too-subtle native disabled rendering. See styles.css's global `:disabled` rule. */ --color-bg-disabled: #e9ecef; --color-text-disabled: #495057; --color-border-disabled: #adb5bd; --color-focus-ring: #12384a; --color-focus-ring-offset: #ffffff; /* ---- Typography ---- Atkinson Hyperlegible is designed for readability at low vision; the fallback stack is plain, widely available system UI fonts. */ --font-family-base: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* OpenDyslexic — weighted letter bottoms and wide default spacing, the most widely recognized dyslexia-friendly typeface. Toggled site-wide by the "Dyslexia-friendly font" control in the accessibility bar ([data-dyslexic-font="on"] on — see css/accessibility.css). */ --font-family-dyslexic: "OpenDyslexic", var(--font-family-base); --line-height-base: 1.6; --line-height-heading: 1.25; --step--1: 0.9rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem; --step-4: 2.441rem; --step-5: 3.052rem; /* ---- Spacing (rem-based so it scales with the font-size control) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* ---- Shape / elevation ---- */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --shadow-sm: 0 1px 2px rgba(18, 58, 75, 0.08); --shadow-md: 0 4px 12px rgba(18, 58, 75, 0.12); --motion-duration: 150ms; --motion-easing: ease-in-out; --container-max: 75rem; } /* High-contrast theme: pure black/white/gold, thick borders, no subtle shadows. Toggled by JS via [data-contrast="high"] on . */ html[data-contrast="high"] { --color-primary: #000000; --color-primary-hover: #000000; --color-primary-contrast: #ffffff; --color-accent: #ffcc00; --color-accent-contrast: #000000; --color-success: #005a00; --color-danger: #b30000; --color-info: #00366b; --color-warning-bg: #ffcc00; --color-warning-text: #000000; --color-heading: #000000; --color-text: #000000; --color-text-muted: #000000; --color-link: #00366b; --color-link-visited: #4b0082; --color-bg: #ffffff; --color-bg-alt: #ffffff; --color-bg-inverse: #000000; --color-text-inverse: #ffffff; --color-border: #000000; --color-border-strong: #000000; --color-bg-disabled: #d9d9d9; --color-text-disabled: #000000; --color-border-disabled: #000000; --color-focus-ring: #000000; --color-focus-ring-offset: #ffcc00; --shadow-sm: none; --shadow-md: none; }