Build smarter color systems with relative colors

CSS relative colors allow you to generate color variations (lighter, darker, transparent) from a single base value instead of maintaining separate variables. Using the `from` keyword with HSL or OKLCH color spaces, you can dynamically adjust hue, saturation, lightness, and opacity. The tutorial demonstrates building a toast notification system where all color variations derive from one base color per theme. OKLCH provides more perceptually consistent results across different hues compared to HSL, especially for yellows and other problematic colors.