/* Using absolute units */
.print-header {
    font-size: 14pt; /* Points for print */
    margin: 1cm; /* Centimeters for physical measurement */
}

.screen-element {
    width: 300px; /* Pixels for screen */
    padding: 20px;
}

.fixed-size {
    height: 2in; /* Inches for precise control */
    width: 3in;
}

/* Using relative units */
.container {
    font-size: 16px; /* Base size */
}

.heading {
    font-size: 2rem; /* 32px - relative to root */
    margin-bottom: 1em; /* 32px - relative to current font size */
}

.box {
    width: 50%; /* Half of parent width */
    padding: 1.5rem; /* Consistent spacing */
}

.typography {
    max-width: 60ch; /* Optimal line length */
    line-height: 1.6em; /* Relative to font size */
}

/* Using viewport units */
.hero-section {
    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
}

.responsive-text {
    font-size: 5vw; /* Scales with viewport width */
    margin: 2vh auto; /* Vertical margin relative to height */
}

.square-element {
    width: 50vmin; /* Always square based on smaller dimension */
    height: 50vmin;
}

.large-element {
    width: 80vmax; /* Based on larger dimension */
    height: 60vmin;
}

/* Using color functions */
.primary {
    background-color: hsl(210, 64%, 50%);
}

.light-variant {
    /* Mix with white for lighter version */
    background-color: color-mix(in srgb, hsl(210, 64%, 50%), white 30%);
}

.dark-variant {
    /* Mix with black for darker version */
    background-color: color-mix(in srgb, hsl(210, 64%, 50%), black 20%);
}

.modern-color {
    /* OKLCH for perceptual uniformity */
    background-color: oklch(60% 0.15 240);
}

.auto-contrast {
    color: color-contrast(black vs white, #333, #666);
}