/* ============================================================ RCMC Share Registry — Design Tokens Single source of truth. No hardcoded values elsewhere. ============================================================ */ :root { /* --- Color: Base Palette --- */ --color-obsidian-900: #1A1917; --color-obsidian-800: #2C2A27; --color-obsidian-700: #3E3B37; --color-obsidian-200: #C5C3BE; --color-obsidian-100: #E2E1DE; --color-obsidian-50: #F0EFED; --color-amber-700: #843E07; /* AA amber for small text on light (~7:1) */ --color-amber-600: #A8560B; --color-amber-500: #C96B0E; --color-amber-400: #E07C1A; --color-amber-100: #F7E4CF; --color-amber-50: #FBF3E8; --color-stone-50: #F9F9F7; --color-stone-100: #F1F1EE; --color-stone-200: #E4E3DF; --color-white: #FFFFFF; /* On-dark text (§1.2 logo on dark surfaces — Obsidian cell colour, ≠ stone-50) */ --color-obsidian-on-dark: #F2F0EC; /* --- Color: Status (4-state system) --- All four states are approved. error/success use the site's existing AA-verified hues. warning = amber family — reserved for genuine warnings only (keep within §1.3 amber budget). info = obsidian neutral, deliberately NOT blue (§2.10). */ --color-error-text: #A1302A; --color-error-border: #F4C0BC; --color-error-bg: #FAECEB; --color-error-strong: #C0392B; /* stronger red — input/border accent + banner rule */ --color-success-text: #2A5E3D; --color-success-border: #B6D9C3; --color-success-bg: #E6F2EC; --color-warning-text: #A8560B; /* amber-600 */ --color-warning-border: #F7E4CF; /* amber-100 */ --color-warning-bg: #FBF3E8; /* amber-50 */ --color-info-text: #3E3B37; /* obsidian-700 */ --color-info-border: #E2E1DE; /* obsidian-100 */ --color-info-bg: #F0EFED; /* obsidian-50 */ /* --- Color: Semantic --- */ --rcmc-bg-page: var(--color-stone-50); --rcmc-bg-dark: var(--color-obsidian-900); --rcmc-bg-subtle: var(--color-stone-100); --rcmc-bg-border: var(--color-obsidian-100); --rcmc-text-primary: var(--color-obsidian-900); --rcmc-text-secondary:var(--color-obsidian-700); --rcmc-text-muted: var(--color-obsidian-200); --rcmc-text-inverse: var(--color-stone-50); --rcmc-accent: var(--color-amber-500); --rcmc-accent-hover: var(--color-amber-600); --rcmc-accent-light: var(--color-amber-50); --rcmc-accent-text: var(--color-amber-700); /* amber as small text on light — AA >=4.5:1; use instead of --rcmc-accent below 24px */ --rcmc-text-on-dark: var(--color-obsidian-on-dark); /* Status role tokens — components reference THESE, not the base palette */ --rcmc-error-text: var(--color-error-text); --rcmc-error-border: var(--color-error-border); --rcmc-error-bg: var(--color-error-bg); --rcmc-error-strong: var(--color-error-strong); --rcmc-success-text: var(--color-success-text); --rcmc-success-border: var(--color-success-border); --rcmc-success-bg: var(--color-success-bg); --rcmc-warning-text: var(--color-warning-text); --rcmc-warning-border: var(--color-warning-border); --rcmc-warning-bg: var(--color-warning-bg); --rcmc-info-text: var(--color-info-text); --rcmc-info-border: var(--color-info-border); --rcmc-info-bg: var(--color-info-bg); /* --- Typography: Fonts --- */ --rcmc-font-display: 'DM Serif Display', Georgia, serif; --rcmc-font-body: 'DM Sans', system-ui, -apple-system, sans-serif; /* --- Typography: Scale --- */ --rcmc-ts-display: 3.25rem; /* 52px */ --rcmc-ts-hero: clamp(2.125rem, 1.46rem + 2.22vw, 3.125rem); /* fluid 34→50px — home hero headline only */ --rcmc-ts-section: clamp(2rem, 1.67rem + 1.11vw, 2.5rem); /* fluid 32→40px — section headings (subordinate to hero) */ --rcmc-ts-h1: 2.5rem; /* 40px */ --rcmc-ts-h2: 2rem; /* 32px */ --rcmc-ts-h3: 1.5rem; /* 24px */ --rcmc-ts-h4: 1.25rem; /* 20px */ --rcmc-ts-lg: 1.125rem; /* 18px */ --rcmc-ts-base: 1rem; /* 16px */ --rcmc-ts-sm: 0.9375rem; /* 15px */ --rcmc-ts-xs: 0.875rem; /* 14px */ --rcmc-ts-label: 0.8125rem; /* 13px */ --rcmc-ts-wordmark: 2rem; /* 32px — logo wordmark, proportional to 44px mark */ /* --- Typography: Weight --- */ --rcmc-fw-light: 300; --rcmc-fw-regular: 400; --rcmc-fw-medium: 500; --rcmc-fw-bold: 700; /* --- Typography: Line Height --- */ --rcmc-lh-tight: 1.15; --rcmc-lh-snug: 1.35; --rcmc-lh-base: 1.6; --rcmc-lh-relaxed: 1.75; /* --- Typography: Letter Spacing --- */ --rcmc-ls-tight: -0.02em; --rcmc-ls-normal: 0; --rcmc-ls-wide: 0.04em; --rcmc-ls-wider: 0.08em; --rcmc-ls-wordmark: 0.07em; /* logo wordmark only — DM Sans 700 */ /* --- Spacing --- */ --rcmc-space-1: 0.25rem; /* 4px */ --rcmc-space-2: 0.5rem; /* 8px */ --rcmc-space-3: 0.75rem; /* 12px */ --rcmc-space-4: 1rem; /* 16px */ --rcmc-space-5: 1.25rem; /* 20px */ --rcmc-space-6: 1.5rem; /* 24px */ --rcmc-space-8: 2rem; /* 32px */ --rcmc-space-10: 2.5rem; /* 40px */ --rcmc-space-12: 3rem; /* 48px */ --rcmc-space-16: 4rem; /* 64px */ --rcmc-space-20: 5rem; /* 80px */ --rcmc-space-24: 6rem; /* 96px */ --rcmc-space-32: 8rem; /* 128px */ /* --- Border Radius --- */ --rcmc-radius-sm: 4px; --rcmc-radius-md: 8px; --rcmc-radius-lg: 12px; --rcmc-radius-xl: 16px; --rcmc-radius-pill: 999px; /* --- Shadows --- */ --rcmc-shadow-sm: 0 1px 3px rgba(26,25,23,0.08), 0 1px 2px rgba(26,25,23,0.04); --rcmc-shadow-md: 0 4px 12px rgba(26,25,23,0.10), 0 2px 4px rgba(26,25,23,0.06); --rcmc-shadow-lg: 0 12px 32px rgba(26,25,23,0.12), 0 4px 8px rgba(26,25,23,0.06); /* --- Layout --- */ --rcmc-max-width: 1200px; --rcmc-content-width: 72ch; --rcmc-nav-height: 72px; /* --- Motion --- */ --rcmc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --rcmc-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --rcmc-duration-fast: 150ms; --rcmc-duration-base: 250ms; --rcmc-duration-slow: 400ms; /* --- Z-index --- */ --rcmc-z-nav: 100; --rcmc-z-overlay: 200; --rcmc-z-modal: 300; }