/** * ============================================================================ * DESIGN TOKENS — CSS Custom Properties (Variables) * ============================================================================ * * This file defines ALL design tokens used across the Öraculi website. * Think of these as the "settings" for the entire visual design. * * WHAT ARE DESIGN TOKENS? * They are named values (colors, fonts, spacing, etc.) stored as CSS * variables. Instead of writing "#640D0D" in 50 places, we write * "var(--color-maroon)" — so if the brand color ever changes, we * update it in ONE place and it changes everywhere. * * HOW TO USE IN OTHER CSS FILES: * color: var(--color-maroon); * font-family: var(--font-heading); * padding: var(--space-lg); * * CATEGORIES: * 1. Colors (brand, derived, functional) * 2. Typography (font families, sizes, weights, line heights) * 3. Spacing (consistent padding/margin scale) * 4. Layout (max widths, container sizes) * 5. Borders & Shadows * 6. Transitions (animation timing) * 7. Z-Index (layering system) * * @package Oraculi * @since 1.0.0 * ============================================================================ */ :root { /* ================================================================= 1. COLORS ================================================================= Brand colors provided by the client. Derived colors are calculated from brand colors for consistency. */ /* --- PRIMARY BRAND COLORS --- */ --color-maroon: #640D0D; /* Deep Maroon — primary brand identity */ --color-dark-red: #890707; /* Dark Red — headings, strong accents */ --color-burnt-orange: #DD5A10; /* Burnt Orange — CTAs, buttons, highlights */ --color-black: #000000; /* Black — body text, heavy elements */ --color-white: #FFFFFF; /* White — backgrounds, text on dark */ /* --- DERIVED COLORS (complement the brand) --- */ --color-cream: #FFF8F5; /* Warm cream — alternating section backgrounds */ --color-light-cream: #FFFCFA; /* Very light cream — subtle warmth */ --color-warm-gray: #F7F3F0; /* Warm gray — card backgrounds */ --color-light-gray: #F5F5F5; /* Light gray — borders, dividers */ --color-medium-gray: #888888; /* Medium gray — meta text, captions */ --color-dark-gray: #333333; /* Dark gray — secondary body text */ --color-charcoal: #1A1A1A; /* Near-black — footer background */ --color-border: #E0D6D0; /* Warm border — subtle dividers */ --color-border-light: #F0EBE8; /* Very light border */ /* --- FUNCTIONAL COLORS --- */ --color-success: #2D8B4E; /* Green — success messages */ --color-error: #D32F2F; /* Red — error messages */ --color-warning: #F9A825; /* Amber — warning messages */ --color-info: #1976D2; /* Blue — info messages */ /* --- INTERACTIVE COLORS --- */ --color-link: #890707; /* Link text color */ --color-link-hover: #DD5A10; /* Link hover color — warm transition */ --color-focus: #DD5A10; /* Focus outline for accessibility */ /* --- OVERLAY --- */ --color-overlay: rgba(0, 0, 0, 0.55); /* Dark overlay for hero text */ --color-overlay-light: rgba(0, 0, 0, 0.30); /* Lighter overlay */ /* ================================================================= 2. TYPOGRAPHY ================================================================= Font choices: - Poppins: Modern, bold, geometric — perfect for NGO headings - Inter: Clean, highly readable — ideal for body text */ /* --- FONT FAMILIES --- */ --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* --- FONT SIZES (fluid scale) --- */ --text-xs: 0.75rem; /* 12px — fine print */ --text-sm: 0.875rem; /* 14px — captions, meta */ --text-base: 1rem; /* 16px — body text */ --text-md: 1.125rem; /* 18px — body text (large screens) */ --text-lg: 1.25rem; /* 20px — lead paragraphs */ --text-xl: 1.5rem; /* 24px — small headings */ --text-2xl: 1.875rem; /* 30px — section headings */ --text-3xl: 2.25rem; /* 36px — page headings */ --text-4xl: 3rem; /* 48px — hero heading (mobile) */ --text-5xl: 3.5rem; /* 56px — hero heading (desktop) */ /* --- FONT WEIGHTS --- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- LINE HEIGHTS --- */ --leading-tight: 1.2; /* Headings */ --leading-snug: 1.4; /* Subheadings */ --leading-normal: 1.6; /* Body text */ --leading-relaxed: 1.8; /* Long-form reading */ /* --- LETTER SPACING --- */ --tracking-tight: -0.02em; /* Headings */ --tracking-normal: 0; /* Body */ --tracking-wide: 0.05em; /* Labels, buttons */ --tracking-wider: 0.1em; /* All-caps text */ /* ================================================================= 3. SPACING ================================================================= Consistent spacing scale based on 4px increments. Use these instead of arbitrary pixel values. */ --space-2xs: 0.125rem; /* 2px */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ --space-5xl: 8rem; /* 128px */ /* Section padding (vertical space between major page sections) */ --section-padding: 5rem; /* Desktop */ --section-padding-sm: 3rem; /* Mobile */ /* ================================================================= 4. LAYOUT ================================================================= Content widths and container sizes. */ --container-max: 1200px; /* Maximum content width */ --container-narrow: 800px; /* Narrow content (text-heavy pages) */ --container-wide: 1400px; /* Wide content (hero, full-width sections) */ --container-padding: 1.5rem; /* Horizontal padding inside containers */ /* ================================================================= 5. BORDERS & SHADOWS ================================================================= */ --radius-sm: 4px; /* Subtle rounding (buttons, inputs) */ --radius-md: 8px; /* Medium rounding (cards) */ --radius-lg: 12px; /* Larger rounding (featured cards) */ --radius-xl: 16px; /* Prominent rounding */ --radius-full: 50%; /* Circle (profile photos) */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15); /* Card hover lift effect */ --shadow-hover: 0 12px 32px rgba(100, 13, 13, 0.15); /* ================================================================= 6. TRANSITIONS ================================================================= Consistent animation timing across all interactions. */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-smooth: 500ms cubic-bezier(0.4, 0, 0.2, 1); /* ================================================================= 7. Z-INDEX SCALE ================================================================= Organized layering system to prevent z-index wars. Higher numbers = closer to the viewer. */ --z-behind: -1; --z-base: 1; --z-dropdown: 100; --z-sticky: 200; /* Sticky header */ --z-overlay: 300; /* Dark overlays */ --z-modal: 400; /* Lightbox, popups */ --z-toast: 500; /* Notifications */ --z-whatsapp: 600; /* Floating WhatsApp button */ }