/** * ============================================================================= * DESIGN SYSTEM - CSS Variables / Design Tokens * ============================================================================= * * This file contains all design tokens for the project. The designer should * update these values to match the brand guidelines. * * INSTRUCTIONS FOR DESIGNER: * 1. Replace placeholder colors with your color palette * 2. Update typography settings to match your font choices * 3. Adjust spacing scale if needed * 4. Define shadow levels for depth/elevation * 5. Both light and dark theme variables should be updated * * NAMING CONVENTION: * --{category}-{property}-{variant} * Examples: --color-primary-500, --font-size-lg, --space-4 * * ============================================================================= */ /* ============================================================================= 1. COLOR PALETTE - BRAND COLORS ============================================================================= Replace these with your brand colors. We use a 50-900 scale similar to Tailwind CSS for flexibility. TIP: Use a tool like https://uicolors.app to generate a full palette from a single brand color. */ :root { /* ----------------------------------------------------- Primary Brand Color ----------------------------------------------------- Main brand color used for CTAs, links, active states. Designer: Replace with your primary brand color palette. */ /* --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; --color-primary-950: #172554; */ /* --color-primary-50: #fff9ec; --color-primary-100: #fff0d3; --color-primary-200: #ffdea5; --color-primary-300: #ffc66d; --color-primary-400: #ffa132; --color-primary-500: #ff840a; --color-primary-600: #e66100; --color-primary-700: #cc4d02; --color-primary-800: #a13c0b; --color-primary-900: #82330c; --color-primary-950: #461704; */ --color-primary-50: #eef8fd; --color-primary-100: #d5eefb; --color-primary-200: #b0dff7; --color-primary-300: #80cbf1; --color-primary-400: #5cbdea; --color-primary-500: #3aa8e0; --color-primary-600: #2490c8; --color-primary-700: #1d74a3; --color-primary-800: #1c5f86; --color-primary-900: #1c4f6f; --color-primary-950: #0f3249; /* ----------------------------------------------------- Secondary Brand Color (Optional) ----------------------------------------------------- Accent color for secondary actions, highlights. Designer: Add your secondary brand color if applicable. */ /* --color-secondary-50: #edfbff; --color-secondary-100: #d7f4ff; --color-secondary-200: #b9edff; --color-secondary-300: #88e4ff; --color-secondary-400: #50d1ff; --color-secondary-500: #28b6ff; --color-secondary-600: #199eff; --color-secondary-700: #0a81eb; --color-secondary-800: #0f66be; --color-secondary-900: #135795; --color-secondary-950: #11355a; */ --color-secondary-50: #fdf6ee; --color-secondary-100: #faebd5; --color-secondary-200: #f4d4aa; --color-secondary-300: #ebb87a; --color-secondary-400: #d4944c; --color-secondary-500: #c07a32; --color-secondary-600: #a86225; --color-secondary-700: #8b4d1e; --color-secondary-800: #71401e; --color-secondary-900: #5e361c; --color-secondary-950: #341c0d; --color-secondary-500-rgb: 204, 146, 81; --color-secondary-600-rgb: 168, 98, 37; /* ----------------------------------------------------- Neutral / Gray Colors ----------------------------------------------------- Used for text, backgrounds, borders. Designer: Adjust warmth/coolness to match brand feel. */ --color-neutral-0: #ffffff; --color-neutral-50: #fafafa; --color-neutral-100: #f4f4f5; --color-neutral-200: #e4e4e7; --color-neutral-300: #d4d4d8; --color-neutral-400: #a1a1aa; --color-neutral-500: #71717a; --color-neutral-600: #52525b; --color-neutral-700: #3f3f46; --color-neutral-800: #27272a; --color-neutral-900: #18181b; --color-neutral-950: #09090b; /* --color-neutral-50: #eefbf3; --color-neutral-100: #d6f5e1; --color-neutral-200: #b1e9c8; --color-neutral-300: #7ed7a9; --color-neutral-400: #49be84; --color-neutral-500: #26a269; --color-neutral-600: #188354; --color-neutral-700: #136945; --color-neutral-800: #125339; --color-neutral-900: #0f4530; --color-neutral-950: #08261b; */ } /* ============================================================================= 2. SEMANTIC COLORS ============================================================================= These colors communicate meaning: success, error, warning, info. Designer: Adjust to match brand feel while maintaining accessibility. */ :root { /* Success (green) */ --color-success-50: #f0fdf4; --color-success-100: #dcfce7; --color-success-500: #22c55e; --color-success-600: #16a34a; --color-success-700: #15803d; /* Error/Danger (red) */ --color-error-50: #fef2f2; --color-error-100: #fee2e2; --color-error-500: #ef4444; --color-error-600: #dc2626; --color-error-700: #b91c1c; /* Warning (amber/yellow) */ --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-warning-700: #b45309; /* Info (blue/cyan) */ --color-info-50: #ecfeff; --color-info-100: #cffafe; --color-info-500: #06b6d4; --color-info-600: #0891b2; --color-info-700: #0e7490; } /* ============================================================================= 3. TYPOGRAPHY ============================================================================= Font families, sizes, weights, and line heights. Designer: Update font-family with your chosen fonts. REMINDER: If using custom fonts, ensure they are loaded in the HTML or via @font-face before referencing them here. */ :root { /* ----------------------------------------------------- Font Families - All with Latin Extended (ČĆŠĐŽ) support ----------------------------------------------------- 22 fonts available, organized by category. Change --font-family-body, --font-family-heading, and --font-family-brand to customize the site typography. */ /* === TECH/FUTURISTIC FONTS (Latin-ext verified) === */ --font-family-exo2: 'Exo 2', sans-serif; /* Geometric, futuristic */ --font-family-audiowide: 'Audiowide', sans-serif; /* Wide tech display */ --font-family-russo-one: 'Russo One', sans-serif; /* Bold display */ --font-family-rajdhani: 'Rajdhani', sans-serif; /* Tech/geometric */ /* === CLEAN/MODERN FONTS (Latin-ext verified) === */ --font-family-roboto: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; --font-family-poppins: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; --font-family-montserrat: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; --font-family-inter: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* === DISPLAY/DECORATIVE FONTS (Latin-ext verified) === */ --font-family-cinzel-decorative: 'Cinzel Decorative', serif; /* Elegant classical */ --font-family-krona-one: 'Krona One', sans-serif; /* Scandinavian retro */ --font-family-oi: 'Oi', serif; /* Ultra-fat quirky */ --font-family-righteous: 'Righteous', sans-serif; /* Retro display */ --font-family-comfortaa: 'Comfortaa', cursive; /* Rounded geometric */ /* === SCRIPT/HANDWRITTEN FONTS (Latin-ext verified) === */ --font-family-ballet: 'Ballet', cursive; /* Elegant formal */ --font-family-great-vibes: 'Great Vibes', cursive; /* Elegant script */ --font-family-caveat: 'Caveat', cursive; /* Casual handwritten */ --font-family-dancing-script: 'Dancing Script', cursive; /* Bouncy casual */ --font-family-sacramento: 'Sacramento', cursive; /* Monoline retro */ --font-family-tangerine: 'Tangerine', cursive; /* Calligraphic */ --font-family-satisfy: 'Satisfy', cursive; /* Brush script */ --font-family-architects-daughter: 'Architects Daughter', cursive; /* Hand-drawn */ --font-family-ephesis: 'Ephesis', cursive; /* Modern casual */ /* === SYSTEM FONTS === */ --font-family-sans: var(--font-family-inter); --font-family-serif: 'Georgia', 'Times New Roman', Times, serif; --font-family-mono: 'Fira Code', 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, monospace; /* === ROLE-BASED ASSIGNMENTS (change these to switch fonts) === */ /* Body text */ --font-family-body: var(--font-family-inter); /* Headings (h1-h6) */ --font-family-heading: var(--font-family-exo2); /* Brand/Display font for logos, hero text, special elements */ --font-family-brand: var(--font-family-comfortaa); /* Menu items in navigation - separated by zone */ --font-family-menu-left: var(--font-family-poppins); --font-family-menu-center: var(--font-family-poppins); --font-family-menu-right: var(--font-family-poppins); /* Tagline/subtitle text */ --font-family-tagline: var(--font-family-caveat); /* ----------------------------------------------------- Font Sizes ----------------------------------------------------- Based on a modular scale. Adjust base size as needed. Current scale: ~1.25 ratio (major third) */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px - Base size */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ /* ----------------------------------------------------- Font Weights ----------------------------------------------------- */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ----------------------------------------------------- Line Heights ----------------------------------------------------- */ --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; /* ----------------------------------------------------- Letter Spacing ----------------------------------------------------- */ --letter-spacing-tighter: -0.05em; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; } /* ============================================================================= 4. SPACING SCALE ============================================================================= Consistent spacing values for margins, padding, gaps. Based on 4px base unit (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96...) Designer: This scale works well for most projects. Only adjust if your design system uses different base units. */ :root { --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-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ } /* ============================================================================= 5. BORDER RADIUS ============================================================================= Consistent rounding for UI elements. Designer: Adjust based on your design style (sharp, rounded, pill-shaped). */ :root { --radius-none: 0; --radius-sm: 0.125rem; /* 2px - Subtle rounding */ --radius-base: 0.25rem; /* 4px - Default */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-3xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* Pill shape / circles */ } /* ============================================================================= 6. SHADOWS / ELEVATION ============================================================================= Box shadows for depth. Higher numbers = more elevation. Designer: Adjust shadow color opacity and spread to match brand feel. */ :root { --shadow-color: 0 0% 0%; /* HSL values for shadow color */ --shadow-none: none; --shadow-xs: 0 1px 2px 0 hsl(var(--shadow-color) / 0.05); --shadow-sm: 0 1px 3px 0 hsl(var(--shadow-color) / 0.1), 0 1px 2px -1px hsl(var(--shadow-color) / 0.1); --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.1), 0 2px 4px -2px hsl(var(--shadow-color) / 0.1); --shadow-lg: 0 10px 15px -3px hsl(var(--shadow-color) / 0.1), 0 4px 6px -4px hsl(var(--shadow-color) / 0.1); --shadow-xl: 0 20px 25px -5px hsl(var(--shadow-color) / 0.1), 0 8px 10px -6px hsl(var(--shadow-color) / 0.1); --shadow-2xl: 0 25px 50px -12px hsl(var(--shadow-color) / 0.25); --shadow-inner: inset 0 2px 4px 0 hsl(var(--shadow-color) / 0.05); } /* ============================================================================= 7. TRANSITIONS / ANIMATIONS ============================================================================= Consistent timing for animations. */ :root { /* Durations */ --duration-75: 75ms; --duration-100: 100ms; --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-500: 500ms; --duration-700: 700ms; --duration-1000: 1000ms; /* Easing functions */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Common transitions */ --transition-none: none; --transition-all: all var(--duration-200) var(--ease-in-out); --transition-colors: color var(--duration-200) var(--ease-in-out), background-color var(--duration-200) var(--ease-in-out), border-color var(--duration-200) var(--ease-in-out); --transition-opacity: opacity var(--duration-200) var(--ease-in-out); --transition-shadow: box-shadow var(--duration-200) var(--ease-in-out); --transition-transform: transform var(--duration-200) var(--ease-in-out); } /* ============================================================================= 8. Z-INDEX SCALE ============================================================================= Layering system for overlapping elements. */ :root { --z-behind: -1; --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-overlay: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; --z-max: 9999; } /* ============================================================================= 9. BREAKPOINTS (for reference) ============================================================================= Note: CSS custom properties can't be used in @media queries directly. These are documented here for reference and can be used in JavaScript. The actual breakpoints should match your design system. */ :root { --breakpoint-xs: 0; /* Mobile first */ --breakpoint-sm: 576px; /* Small devices */ --breakpoint-md: 768px; /* Medium devices (tablets) */ --breakpoint-lg: 992px; /* Large devices (desktops) */ --breakpoint-xl: 1200px; /* Extra large devices */ --breakpoint-2xl: 1400px; /* XXL devices */ } /* ============================================================================= 10. LIGHT THEME (Default) ============================================================================= Semantic color mappings for light theme. These reference the color palette defined above. */ :root, [data-theme="light"] { /* Background colors */ --bg-primary: var(--color-neutral-0); --bg-secondary: var(--color-neutral-50); --bg-tertiary: var(--color-neutral-100); --bg-inverse: var(--color-neutral-900); /* RGB versions for rgba() usage (glassmorphism, etc.) */ --bg-primary-rgb: 255, 255, 255; --bg-secondary-rgb: 250, 250, 250; --bg-tertiary-rgb: 244, 244, 245; --border-default-rgb: 228, 228, 231; /* Text colors */ --text-primary: var(--color-neutral-900); --text-secondary: var(--color-neutral-600); --text-tertiary: var(--color-neutral-400); --text-inverse: var(--color-neutral-0); --text-muted: var(--color-neutral-500); /* Border colors */ --border-default: var(--color-neutral-200); --border-muted: var(--color-neutral-100); --border-strong: var(--color-neutral-300); /* Link colors */ --link-default: var(--color-primary-600); --link-hover: var(--color-primary-700); --link-visited: var(--color-primary-800); /* Interactive states */ --focus-ring: var(--color-primary-500); --focus-ring-offset: var(--color-neutral-0); /* Component-specific (examples) */ --card-bg: var(--bg-primary); --card-border: var(--border-default); --card-shadow: var(--shadow-sm); --input-bg: var(--bg-primary); --input-border: var(--border-default); --input-focus: var(--color-primary-500); --button-primary-bg: var(--color-primary-600); --button-primary-text: var(--color-neutral-0); --button-primary-hover: var(--color-primary-700); /* Overlay/backdrop */ --overlay-bg: rgba(0, 0, 0, 0.5); /* Interactive Controls (dropdowns, filters, pills) */ --control-bg: var(--color-neutral-0); --control-bg-hover: var(--color-neutral-50); --control-bg-active: var(--color-neutral-100); --control-border: var(--color-neutral-200); --control-border-hover: var(--color-neutral-300); --control-border-active: var(--color-neutral-400); --control-text: var(--color-neutral-700); --control-text-hover: var(--color-neutral-900); --control-text-active: var(--color-neutral-900); --control-ring: var(--color-primary-200); /* Active selection accent - subtle primary tint */ --control-selected-bg: var(--color-primary-50); --control-selected-border: var(--color-primary-200); --control-selected-text: var(--color-primary-700); } /* ============================================================================= 11. DARK THEME ============================================================================= Semantic color mappings for dark theme. Designer: Adjust these to ensure good contrast and readability. */ [data-theme="dark"] { /* Background colors */ --bg-primary: var(--color-neutral-900); --bg-secondary: var(--color-neutral-800); --bg-tertiary: var(--color-neutral-700); --bg-inverse: var(--color-neutral-0); /* RGB versions for rgba() usage (glassmorphism, etc.) */ --bg-primary-rgb: 24, 24, 27; --bg-secondary-rgb: 39, 39, 42; --bg-tertiary-rgb: 63, 63, 70; --border-default-rgb: 63, 63, 70; /* Text colors */ --text-primary: var(--color-neutral-50); --text-secondary: var(--color-neutral-300); --text-tertiary: var(--color-neutral-500); --text-inverse: var(--color-neutral-900); --text-muted: var(--color-neutral-400); /* Border colors */ --border-default: var(--color-neutral-700); --border-muted: var(--color-neutral-800); --border-strong: var(--color-neutral-600); /* Link colors */ --link-default: var(--color-primary-400); --link-hover: var(--color-primary-300); --link-visited: var(--color-primary-500); /* Interactive states */ --focus-ring: var(--color-primary-400); --focus-ring-offset: var(--color-neutral-900); /* Component-specific */ --card-bg: var(--bg-secondary); --card-border: var(--border-default); --card-shadow: var(--shadow-lg); --input-bg: var(--color-neutral-800); --input-border: var(--border-default); --input-focus: var(--color-primary-400); --button-primary-bg: var(--color-primary-500); --button-primary-text: var(--color-neutral-0); --button-primary-hover: var(--color-primary-400); /* Overlay/backdrop */ --overlay-bg: rgba(0, 0, 0, 0.7); /* Adjusted shadows for dark mode (lighter shadows don't work well) */ --shadow-color: 0 0% 0%; /* Interactive Controls (dark overrides) */ --control-bg: var(--color-neutral-800); --control-bg-hover: var(--color-neutral-700); --control-bg-active: var(--color-neutral-700); --control-border: var(--color-neutral-600); --control-border-hover: var(--color-neutral-500); --control-border-active: var(--color-neutral-400); --control-text: var(--color-neutral-300); --control-text-hover: var(--color-neutral-100); --control-text-active: var(--color-neutral-100); --control-ring: rgba(58, 168, 224, 0.25); --control-selected-bg: rgba(58, 168, 224, 0.1); --control-selected-border: var(--color-primary-700); --control-selected-text: var(--color-primary-400); } /* ============================================================================= 12. COMPONENT TOKENS (Optional) ============================================================================= Pre-defined component variables for consistency. These combine the primitive tokens above into ready-to-use component values. Designer: These are optional but helpful for maintaining consistency. */ :root { /* Header */ --header-height: 64px; --header-height-mobile: 56px; --header-bg: var(--bg-secondary); --header-border: var(--border-default); /* Footer */ --footer-bg: var(--bg-secondary); --footer-border: var(--border-default); --footer-text: var(--text-secondary); /* Sidebar (for admin panel) */ --sidebar-width: 280px; --sidebar-width-collapsed: 64px; --sidebar-bg: var(--bg-secondary); /* Container max-widths */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; --container-2xl: 1320px; /* Form elements */ --input-height: 40px; --input-height-sm: 32px; --input-height-lg: 48px; --input-padding-x: var(--space-3); --input-padding-y: var(--space-2); /* Buttons */ --button-height: 40px; --button-height-sm: 32px; --button-height-lg: 48px; --button-padding-x: var(--space-4); --button-padding-y: var(--space-2); --button-radius: var(--radius-md); } /* ============================================================================= 13. BACKWARD COMPATIBILITY ALIASES ============================================================================= These aliases maintain compatibility with legacy code that may reference older variable names. New code should use the canonical names. */ :root { /* Border color alias (canonical: --border-default) */ --border-color: var(--border-default); /* Border radius aliases (canonical: --radius-*) */ --border-radius-sm: var(--radius-sm); --border-radius-md: var(--radius-md); --border-radius-lg: var(--radius-lg); --border-radius-xl: var(--radius-xl); /* RGB versions for rgba() usage - Primary colors */ --color-primary-400-rgb: 92, 189, 234; --color-primary-500-rgb: 58, 168, 224; --color-primary-600-rgb: 36, 144, 200; /* RGB versions for rgba() usage - Secondary colors */ --color-secondary-400-rgb: 212, 148, 76; --color-secondary-500-rgb: 192, 122, 50; --color-secondary-600-rgb: 168, 98, 37; /* RGB versions for rgba() usage - Semantic colors */ --color-success-500-rgb: 34, 197, 94; --color-error-500-rgb: 239, 68, 68; --color-warning-500-rgb: 245, 158, 11; --color-info-500-rgb: 6, 182, 212; } [data-theme="dark"] { /* Ensure backward compatibility aliases work in dark theme */ --border-color: var(--border-default); } /* ============================================================================= 14. BORDER WIDTH TOKENS ============================================================================= Standardized border widths for consistent styling across components. */ :root { --border-width-none: 0; --border-width-thin: 1px; --border-width-md: 2px; --border-width-thick: 3px; --border-width-heavy: 4px; } /* ============================================================================= 15. OPACITY TOKENS ============================================================================= Standardized opacity values for consistent transparency effects. */ :root { --opacity-0: 0; --opacity-5: 0.05; --opacity-10: 0.1; --opacity-20: 0.2; --opacity-25: 0.25; --opacity-30: 0.3; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-70: 0.7; --opacity-75: 0.75; --opacity-80: 0.8; --opacity-90: 0.9; --opacity-100: 1; /* Semantic opacity tokens */ --opacity-disabled: 0.6; --opacity-hover: 0.8; --opacity-subtle: 0.5; --opacity-overlay: 0.75; } /* ============================================================================= 16. FOCUS STATE TOKENS ============================================================================= Standardized focus state styling for accessibility and consistency. */ :root { --focus-ring-width: 2px; --focus-ring-style: solid; --focus-ring-offset: 2px; --focus-ring-color: var(--color-primary-500); --focus-ring-opacity: 0.25; /* Pre-composed focus ring for box-shadow usage */ --focus-ring-shadow: 0 0 0 var(--focus-ring-width) rgba(var(--color-primary-500-rgb), var(--focus-ring-opacity)); } [data-theme="dark"] { --focus-ring-color: var(--color-primary-400); --focus-ring-shadow: 0 0 0 var(--focus-ring-width) rgba(var(--color-primary-400-rgb), 0.3); } /* ============================================================================= 17. BACKDROP FILTER TOKENS ============================================================================= Standardized blur values for glassmorphism and overlay effects. */ :root { --backdrop-blur-none: 0; --backdrop-blur-sm: 4px; --backdrop-blur-md: 8px; --backdrop-blur-lg: 12px; --backdrop-blur-xl: 16px; --backdrop-blur-2xl: 24px; --backdrop-blur-3xl: 40px; } /* ============================================================================= 18. ACCESSIBILITY - REDUCED MOTION SUPPORT ============================================================================= When users prefer reduced motion, we minimize or disable animations and transitions for a more accessible experience. */ @media (prefers-reduced-motion: reduce) { :root { /* Disable all transition durations */ --duration-75: 0ms; --duration-100: 0ms; --duration-150: 0ms; --duration-200: 0ms; --duration-300: 0ms; --duration-500: 0ms; --duration-700: 0ms; --duration-1000: 0ms; /* Disable transition presets */ --transition-all: none; --transition-colors: none; --transition-opacity: none; --transition-shadow: none; --transition-transform: none; } /* Disable all animations globally */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================= 19. HIGH CONTRAST MODE SUPPORT ============================================================================= Enhanced colors for users who prefer high contrast. */ @media (prefers-contrast: more) { :root { /* Increase border visibility */ --border-default: var(--color-neutral-400); --border-muted: var(--color-neutral-300); --border-strong: var(--color-neutral-600); /* Ensure text has maximum contrast */ --text-primary: var(--color-neutral-950); --text-secondary: var(--color-neutral-800); --text-muted: var(--color-neutral-600); /* Stronger focus indicators */ --focus-ring-width: 3px; --focus-ring-opacity: 0.5; } [data-theme="dark"] { --border-default: var(--color-neutral-500); --border-muted: var(--color-neutral-600); --border-strong: var(--color-neutral-300); --text-primary: var(--color-neutral-0); --text-secondary: var(--color-neutral-100); --text-muted: var(--color-neutral-300); } }