/* ═══════════════════════════════════════════════════════════════
EOHSJ North Central Lieutenancy — Design Tokens
v2 refined: bumped base font (19px), larger touch targets
═══════════════════════════════════════════════════════════════ */
/* ── GOOGLE FONTS ──────────────────────────────────────────────
Import in HTML before this file:
──────────────────────────────────────────────────────────── */
:root {
/* ── COLORS ─────────────────────────────────────────────────── */
/* Jerusalem Red */
--c-primary: #8B1A1A;
--c-primary-light: #A63030;
--c-primary-dark: #6B1010;
--c-primary-bg: #FDF2F2;
/* Sanctum Gold */
--c-secondary: #B8860B;
--c-secondary-light: #DAA520;
--c-secondary-dark: #8B6914;
--c-secondary-bg: #FBF7ED;
/* Holy Land Teal */
--c-accent: #1A6B5A;
--c-accent-light: #248F79;
--c-accent-dark: #0F4F42;
--c-accent-bg: #F0F9F6;
/* Neutrals */
--c-charcoal: #1A1A1A;
--c-text: #2D2926;
--c-text2: #5C5650;
--c-muted: #685F58; /* WCAG AA: 6.04:1 on white, 4.9:1 on bg3 (was #8A847C, failed AA) */
--c-hint: #7A746B; /* WCAG AA: 4.59:1 on white (was #ADA89F, failed AA) */
--c-ivory: #FFFFF0;
--c-bg: #FDFCF8;
--c-bg2: #F5F3ED;
--c-bg3: #EDEADE;
--c-white: #FFFFFF;
--c-border: #D6D2C8;
--c-border-lt: #E8E5DC;
--c-border-dk: #B5B0A5;
/* Semantic */
--c-success: #2E7D4F;
--c-success-bg: #F0F9F4;
--c-warning: #B8860B;
--c-warning-bg: #FBF7ED;
--c-error: #B91C1C;
--c-error-bg: #FEF2F2;
--c-info: #1A6B5A;
--c-info-bg: #F0F9F6;
/* Long-form aliases (for compatibility with style guide) */
--color-primary: var(--c-primary);
--color-secondary: var(--c-secondary);
--color-accent: var(--c-accent);
--color-charcoal: var(--c-charcoal);
--color-text: var(--c-text);
--color-text-secondary: var(--c-text2);
--color-text-muted: var(--c-muted);
--color-text-hint: var(--c-hint);
--color-ivory: var(--c-ivory);
--color-bg: var(--c-bg);
--color-bg-secondary: var(--c-bg2);
--color-bg-tertiary: var(--c-bg3);
--color-white: var(--c-white);
--color-border: var(--c-border);
--color-border-light: var(--c-border-lt);
--color-border-dark: var(--c-border-dk);
/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
--font-h: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
--font-b: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
/* Long-form aliases */
--font-heading: var(--font-h);
--font-body: var(--font-b);
/* Type scale (1.25 ratio from 18px) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.75rem; /* 28px */
--text-3xl: 2.125rem; /* 34px */
--text-4xl: 2.625rem; /* 42px */
--text-5xl: 3.25rem; /* 52px */
--text-6xl: 4rem; /* 64px */
/* v2 bump: body 19px */
--text-body-v2: 1.1875rem; /* 19px */
/* Line heights */
--leading-tight: 1.2;
--leading-snug: 1.3;
--leading-normal: 1.6;
--leading-body: 1.65; /* v2 body line-height */
--leading-relaxed: 1.75;
/* Font weights */
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-semibold: 600;
--w-bold: 700;
/* Long-form aliases */
--weight-light: var(--w-light);
--weight-regular: var(--w-regular);
--weight-medium: var(--w-medium);
--weight-semibold: var(--w-semibold);
--weight-bold: var(--w-bold);
/* ── SPACING (4px base unit) ─────────────────────────────────── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* ── LAYOUT ──────────────────────────────────────────────────── */
--max-width: 1200px;
--max-width-narrow: 800px;
--max-width-wide: 1400px;
--max-width-section: 1000px;
--gutter: 1.5rem;
--gutter-wide: 2rem;
/* ── BORDER RADIUS ───────────────────────────────────────────── */
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-full: 9999px;
/* Long-form aliases */
--radius-sm: var(--r-sm);
--radius-md: var(--r-md);
--radius-lg: var(--r-lg);
--radius-xl: var(--r-xl);
--radius-full: var(--r-full);
/* ── SHADOWS ─────────────────────────────────────────────────── */
--sh-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
--sh-md: 0 2px 8px rgba(26, 26, 26, 0.08);
--sh-lg: 0 4px 16px rgba(26, 26, 26, 0.10);
--sh-xl: 0 8px 32px rgba(26, 26, 26, 0.12);
/* Long-form aliases */
--shadow-sm: var(--sh-sm);
--shadow-md: var(--sh-md);
--shadow-lg: var(--sh-lg);
--shadow-xl: var(--sh-xl);
/* ── TRANSITIONS ─────────────────────────────────────────────── */
--tr: 250ms ease; /* layout transitions */
--tr-f: 150ms ease; /* hover/focus transitions */
--transition-fast: var(--tr-f);
--transition-base: var(--tr);
--transition-slow: 400ms ease;
/* ── Z-INDEX ─────────────────────────────────────────────────── */
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
/* ── WALLPAPER TILE ──────────────────────────────────────────────
600×600 PNG: 2×2 checkerboard alternating the full Order seal
and the Jerusalem cross with gold accent. Red+gold artwork on
transparent background — same tile works on both light parchment
and dark charcoal panels at appropriate opacity.
Tile size on screen: 600px (display 1×). Cells inside: 300×300.
Seal occupies 88% of its cell; cross occupies 79% (10% smaller
to balance the seal's visible circle/ring footprint).
The old `--cross-tile-ivory` / `--cross-tile-red` variable names
are kept as aliases so all 21 existing usage sites resolve to the
new tile without renaming. Both point at the same PNG. */
--wallpaper-tile: url("/images/brand/wallpaper-tile.png");
--cross-tile-ivory: var(--wallpaper-tile);
--cross-tile-red: var(--wallpaper-tile);
}
/* ── REDUCED MOTION ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.texture,
.hero-texture,
.event-texture,
.cta-texture,
.footer-texture {
background-attachment: scroll !important;
}
}