/** * CSS Custom Properties (Variables) - Design System * * @package eRide Theme * @version 1.0.0 * @created 2025-12-06 * * This file defines CSS custom properties that map to theme.json values * and provides additional utility variables for consistent styling. * * WordPress FSE automatically generates --wp--preset--color--{slug} variables * from theme.json. This file provides shorter aliases and additional tokens. * * USAGE: * Replace hardcoded values with these variables: * color: #64c5b2; --> color: var(--color-primary); * padding: 16px; --> padding: var(--space-md); * border-radius: 8px; --> border-radius: var(--radius-md); */ :root { /* ===================================================== COLOR SYSTEM (mapped from theme.json palette) ===================================================== */ /* Brand Colors */ --color-primary: #64c5b2; /* Main brand teal */ --color-primary-dark: #3fa692; /* Darker teal for hover/active */ --color-primary-green: #44B81B; /* Accent green */ --color-primary-light: #c1eed7; /* Light teal background */ /* Base/Background Colors */ --color-base: #ffffff; /* Pure white */ --color-base-2: #f5f5f6; /* Light gray background */ --color-base-3: #f9f9f9; /* Off-white */ --color-base-4: #fefefe; /* Near white */ /* Contrast/Text Colors */ --color-contrast: #000000; /* Black text */ --color-contrast-2: #020202; /* Near black */ /* Gray Scale (dark to light) */ --color-gray-100: #333e48; /* Darkest gray */ --color-gray-200: #343f49; --color-gray-300: #4b4b4b; --color-gray-400: #606060; --color-gray-500: #616b73; --color-gray-600: #7f7f7f; --color-gray-700: #777c80; --color-gray-800: #83898e; --color-gray-900: #878787; --color-gray-1000: #a3a3a3; --color-gray-1100: #d6d6d6; /* Lightest gray */ --color-gray-1200: #7f8a94; /* Tailwind-compatible grays (for components using Tailwind palette) */ --color-tw-gray-50: #f9fafb; --color-tw-gray-100: #f3f4f6; --color-tw-gray-200: #e5e7eb; --color-tw-gray-300: #d1d5db; --color-tw-gray-400: #9ca3af; --color-tw-gray-500: #6b7280; --color-tw-gray-600: #4b5563; --color-tw-gray-700: #374151; --color-tw-gray-800: #1f2937; --color-tw-gray-900: #111827; /* Semantic Colors */ --color-info: #3f7fca; /* Information blue */ --color-success: #3fca90; /* Success green */ --color-success-alt: #22c55e; /* Alternative success */ --color-warning: #fed600; /* Warning yellow */ --color-danger: #616b73; /* Muted danger */ --color-danger-strong: #d9374e; /* Strong danger/error red */ --color-error: #c0392b; /* Error red */ /* WhatsApp Brand (for consistency) */ --color-whatsapp: #25d366; --color-whatsapp-dark: #128c7e; /* ===================================================== SPACING SYSTEM (mapped from theme.json) ===================================================== */ --space-xs: 0.5rem; /* 8px - Extra small */ --space-sm: 1rem; /* 16px - Small */ --space-md: 1.5rem; /* 24px - Medium */ --space-lg: 2rem; /* 32px - Large */ --space-xl: 3rem; /* 48px - Extra large */ --space-2xl: 4rem; /* 64px */ --space-3xl: 5rem; /* 80px */ --space-4xl: 6rem; /* 96px */ --space-5xl: 7.5rem; /* 120px */ /* Fluid spacing (responsive) */ --space-fluid-sm: min(1.5rem, 2vw); --space-fluid-md: min(2.5rem, 3vw); --space-fluid-lg: min(4rem, 5vw); --space-fluid-xl: min(6.5rem, 8vw); /* ===================================================== TYPOGRAPHY ===================================================== */ /* Font Families */ --font-body: "Inter", sans-serif; --font-heading: "Open Sans", sans-serif; --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Font Sizes (fluid) */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12-14px */ --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); /* 14-16px */ --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); /* 16-18px */ --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18-20px */ --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20-24px */ --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24-32px */ --text-3xl: clamp(2rem, 1.75rem + 1.25vw, 2.5rem); /* 32-40px */ --text-4xl: clamp(2.5rem, 2rem + 2vw, 3.5rem); /* 40-56px */ /* Font Weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line Heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* ===================================================== BORDER RADIUS ===================================================== */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Pills/circles */ /* ===================================================== SHADOWS ===================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* Colored shadows (for buttons, cards) */ --shadow-primary: 0 4px 14px rgba(100, 197, 178, 0.35); --shadow-primary-lg: 0 8px 20px rgba(100, 197, 178, 0.4); /* ===================================================== TRANSITIONS ===================================================== */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 500ms ease; /* Specific transitions */ --transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease; --transition-transform: transform 200ms ease; --transition-opacity: opacity 200ms ease; --transition-all: all 200ms ease; /* ===================================================== Z-INDEX SCALE ===================================================== */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 500; --z-overlay: 1000; --z-modal: 1100; --z-popover: 1200; --z-tooltip: 1300; --z-toast: 1400; --z-max: 9999; /* ===================================================== LAYOUT ===================================================== */ --content-width: 890px; /* From theme.json */ --wide-width: 1400px; /* From theme.json */ --container-padding: var(--space-md); /* ===================================================== FORM ELEMENTS ===================================================== */ --input-height: 44px; /* Minimum touch target */ --input-height-sm: 36px; --input-height-lg: 52px; --input-padding-x: var(--space-sm); --input-padding-y: 0.625rem; --input-border-color: var(--color-gray-1100); --input-border-radius: var(--radius-md); --input-focus-ring: 0 0 0 3px rgba(100, 197, 178, 0.25); /* ===================================================== BUTTON VARIANTS ===================================================== */ --btn-padding-x: var(--space-md); --btn-padding-y: 0.75rem; --btn-font-weight: var(--font-semibold); --btn-border-radius: var(--radius-md); /* ===================================================== BREAKPOINTS (for reference - use in media queries) ===================================================== */ /* * --breakpoint-sm: 640px; * --breakpoint-md: 768px; * --breakpoint-lg: 1024px; * --breakpoint-xl: 1280px; * --breakpoint-2xl: 1536px; * * Note: CSS variables cannot be used in media queries. * These values are documented here for reference. */ } /* ===================================================== DARK MODE SUPPORT (future-ready) ===================================================== */ @media (prefers-color-scheme: dark) { :root { /* Uncomment and customize when implementing dark mode --color-base: #1a1a1a; --color-base-2: #2d2d2d; --color-contrast: #ffffff; */ } }