/** * Design System Tokens * Rooted in Sacred Tradition - warm, elevated aesthetic * PWA-first approach with native app feel * * THEME SELECTION: Add [data-theme="burgundy"] or [data-theme="blue"] to * Default is blue. Burgundy available as alternate theme. */ @import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap"); :root { /* ═══════════════════════════════════════════════════════════════ COLOR SYSTEM Warm, saturated palette rooted in liturgical tradition ═══════════════════════════════════════════════════════════════ */ /* Primary - Deep Navy Blue (Marian blue, wisdom, tradition) */ --color-primary-50: #f0f5fa; --color-primary-100: #dce8f3; --color-primary-200: #bdd4e9; --color-primary-300: #8fb7d9; --color-primary-400: #5a93c4; --color-primary-500: #3a74ad; --color-primary-600: #2d5d93; --color-primary-700: #274b78; --color-primary-800: #1a5276; --color-primary-900: #1a3d5c; --color-primary-950: #11283d; } /* Burgundy Theme - Deep Burgundy/Wine (Precious Blood, vestments) */ [data-theme="burgundy"] { --color-primary-50: #fdf5f6; --color-primary-100: #faeaec; --color-primary-200: #f5d5da; --color-primary-300: #edb3bc; --color-primary-400: #e08494; --color-primary-500: #cf5c70; --color-primary-600: #b83d54; --color-primary-700: #9a3145; --color-primary-800: #7d2a3a; --color-primary-900: #6b2735; --color-primary-950: #3c1119; } :root { /* Accent - Liturgical Gold (rich, not brassy) */ --color-accent-50: #fdfbf3; --color-accent-100: #fbf5e1; --color-accent-200: #f6e9c3; --color-accent-300: #f0d89a; --color-accent-400: #e8c266; --color-accent-500: #dca83d; --color-accent-600: #c98f2a; --color-accent-700: #a77224; --color-accent-800: #875a23; --color-accent-900: #6f4a20; --color-accent-950: #40270f; /* Semantic - Success (forest green, growth) */ --color-success-50: #f3faf5; --color-success-100: #e3f5e9; --color-success-500: #3d9a5f; --color-success-600: #2f7d4b; --color-success-700: #28663f; /* Semantic - Warning (amber, warm) */ --color-warning-50: #fffbf0; --color-warning-100: #fef4d9; --color-warning-500: #d9a33d; --color-warning-600: #c28a2a; --color-warning-700: #9e6d22; /* Semantic - Error (deep coral) */ --color-error-50: #fef5f4; --color-error-100: #fde8e6; --color-error-500: #c9524a; --color-error-600: #b33d35; --color-error-700: #94322c; /* Neutral - Warm taupe tones (less green) */ --color-neutral-0: #ffffff; --color-neutral-50: #f9f7f6; --color-neutral-100: #f3f0ee; --color-neutral-200: #eae6e3; --color-neutral-300: #dbd6d2; --color-neutral-400: #b8b1aa; --color-neutral-500: #948c84; --color-neutral-600: #716962; --color-neutral-700: #564f48; --color-neutral-800: #413b36; --color-neutral-900: #302b27; --color-neutral-950: #1c1916; /* Surface colors */ --surface-primary: var(--color-neutral-0); --surface-secondary: var(--color-neutral-50); --surface-tertiary: var(--color-neutral-100); --surface-elevated: var(--color-neutral-0); --surface-overlay: rgba(36, 34, 25, 0.5); /* Text colors */ --text-primary: var(--color-neutral-900); --text-secondary: var(--color-neutral-600); --text-tertiary: var(--color-neutral-500); --text-inverse: var(--color-neutral-0); --text-accent: var(--color-primary-700); /* Border colors */ --border-subtle: var(--color-neutral-200); --border-default: var(--color-neutral-300); --border-strong: var(--color-neutral-400); --border-focus: var(--color-primary-500); /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY Elegant serifs for display, clean sans for body ═══════════════════════════════════════════════════════════════ */ --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-display: "Crimson Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-serif: "Crimson Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace; /* Font sizes - Mobile-first scale */ --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* Line heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ═══════════════════════════════════════════════════════════════ SPACING 8px base unit system ═══════════════════════════════════════════════════════════════ */ --space-0: 0; --space-px: 1px; --space-0_5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1_5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2_5: 0.625rem; /* 10px */ --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 */ /* Safe areas for PWA */ --safe-area-inset-top: env(safe-area-inset-top, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); --safe-area-inset-left: env(safe-area-inset-left, 0px); --safe-area-inset-right: env(safe-area-inset-right, 0px); /* ═══════════════════════════════════════════════════════════════ SIZING ═══════════════════════════════════════════════════════════════ */ /* Touch targets - minimum 44px for accessibility */ --touch-target-min: 2.75rem; /* 44px */ --touch-target-sm: 2rem; /* 32px - only for secondary actions */ --touch-target-lg: 3rem; /* 48px */ --touch-target-xl: 3.5rem; /* 56px */ /* Component heights */ --height-input: 2.75rem; /* 44px */ --height-button: 2.75rem; /* 44px */ --height-button-sm: 2.25rem; /* 36px */ --height-button-lg: 3rem; /* 48px */ --height-nav: 3.5rem; /* 56px */ --height-header: 3.5rem; /* 56px */ --height-bottom-nav: 5rem; /* 80px - includes safe area */ /* Container widths */ --container-xs: 20rem; /* 320px */ --container-sm: 24rem; /* 384px */ --container-md: 28rem; /* 448px */ --container-lg: 32rem; /* 512px */ --container-xl: 36rem; /* 576px */ --container-2xl: 42rem; /* 672px */ --container-max: 80rem; /* 1280px */ /* ═══════════════════════════════════════════════════════════════ BORDERS & RADIUS Refined, minimal rounding for a classic feel ═══════════════════════════════════════════════════════════════ */ --radius-none: 0; --radius-sm: 0.125rem; /* 2px */ --radius-md: 0.25rem; /* 4px */ --radius-lg: 0.375rem; /* 6px */ --radius-xl: 0.5rem; /* 8px */ --radius-2xl: 0.625rem; /* 10px */ --radius-3xl: 0.75rem; /* 12px */ --radius-full: 9999px; --border-width-thin: 1px; --border-width-default: 1.5px; --border-width-thick: 2px; /* ═══════════════════════════════════════════════════════════════ SHADOWS & ELEVATION Subtle, warm depth ═══════════════════════════════════════════════════════════════ */ --shadow-xs: 0 1px 2px rgba(36, 34, 25, 0.05); --shadow-sm: 0 1px 3px rgba(36, 34, 25, 0.07), 0 1px 2px rgba(36, 34, 25, 0.04); --shadow-md: 0 4px 6px -1px rgba(36, 34, 25, 0.07), 0 2px 4px -1px rgba(36, 34, 25, 0.04); --shadow-lg: 0 10px 15px -3px rgba(36, 34, 25, 0.07), 0 4px 6px -2px rgba(36, 34, 25, 0.04); --shadow-xl: 0 20px 25px -5px rgba(36, 34, 25, 0.08), 0 10px 10px -5px rgba(36, 34, 25, 0.03); --shadow-2xl: 0 25px 50px -12px rgba(36, 34, 25, 0.18); /* Inset shadows */ --shadow-inset: inset 0 2px 4px rgba(36, 34, 25, 0.04); /* Focus ring */ --shadow-focus: 0 0 0 3px rgba(39, 75, 120, 0.2); --shadow-focus-error: 0 0 0 3px rgba(201, 82, 74, 0.2); } /* Burgundy theme focus shadow */ [data-theme="burgundy"] { --shadow-focus: 0 0 0 3px rgba(154, 49, 69, 0.2); } :root { /* ═══════════════════════════════════════════════════════════════ TRANSITIONS & ANIMATIONS Smooth, native-feeling motion ═══════════════════════════════════════════════════════════════ */ /* Durations */ --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 350ms; --duration-slower: 500ms; /* Easings - Apple-style curves */ --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --ease-in: cubic-bezier(0.32, 0, 0.67, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1); /* Common transitions */ --transition-colors: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --transition-transform: transform var(--duration-normal) var(--ease-out); --transition-opacity: opacity var(--duration-normal) var(--ease-out); --transition-shadow: box-shadow var(--duration-normal) var(--ease-out); --transition-all: all var(--duration-normal) var(--ease-out); /* ═══════════════════════════════════════════════════════════════ Z-INDEX SCALE ═══════════════════════════════════════════════════════════════ */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-header: 400; --z-drawer: 500; --z-modal: 600; --z-popover: 700; --z-toast: 800; --z-tooltip: 900; --z-max: 9999; /* ═══════════════════════════════════════════════════════════════ TRACK & STATUS COLORS Refined, accessible color coding ═══════════════════════════════════════════════════════════════ */ /* Track 1 - Unbaptized: Deep blue-gray */ --track-1-bg: #e8eef3; --track-1-text: #3d5a73; --track-1-border: #c5d4e0; /* Track 2 - Baptized Catholic: Warm rose */ --track-2-bg: #f8ecef; --track-2-text: #7a4a56; --track-2-border: #e8cfd6; /* Track 3 - Baptized Other: Golden amber */ --track-3-bg: #f8f2e5; --track-3-text: #6b5a35; --track-3-border: #e8dcc0; /* Period colors - richer, more liturgical */ --period-inquiry-bg: var(--color-neutral-100); --period-inquiry-text: var(--color-neutral-700); --period-catechumenate-bg: #e5eef5; --period-catechumenate-text: #2c5282; --period-purification-bg: #f0e5f5; --period-purification-text: #553c7b; --period-mystagogy-bg: #e5f5ed; --period-mystagogy-text: #276749; /* Status colors */ --status-active-bg: var(--color-success-100); --status-active-text: var(--color-success-700); --status-deferred-bg: var(--color-warning-100); --status-deferred-text: var(--color-warning-700); --status-withdrawn-bg: var(--color-error-100); --status-withdrawn-text: var(--color-error-700); --status-completed-bg: var(--color-primary-100); --status-completed-text: var(--color-primary-700); } /* Dark mode support (future) */ @media (prefers-color-scheme: dark) { :root { /* Override variables for dark mode when implemented */ } } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }