Values, Units, and Modern CSS Data Types

/* Absolute */
.box { width: 300px; } /* Fixed size */

/* Font-relative */
.text { 
    font-size: 1.5rem;    /* 24px if root is 16px */
    padding: 1em;         /* 24px (relative to own font-size) */
    margin-bottom: 2rem;  /* 32px (relative to root) */
}

/* Viewport units */
.hero { height: 100vh; }    /* Full viewport height */
.banner { width: 100vw; }   /* Full viewport width */
.square { width: 50vmin; height: 50vmin; } /* Square */

/* Font-based */
input { width: 20ch; }  /* ~20 characters wide */

/* New viewport units for mobile */
.mobile-hero {
    height: 100dvh;  /* Dynamic - handles browser UI */
}

/* Traditional formats */
.hex { color: #ff0000; }
.rgb { color: rgb(255 0 0); }
.rgba { color: rgb(255 0 0 / 0.5); }
.hsl { color: hsl(0 100% 50%); }
.hsla { color: hsl(0 100% 50% / 0.5); }

/* Modern formats - better for manipulation */
.hwb { color: hwb(0 0% 0%); }  /* Pure red */
.lch { color: lch(50% 70 40); } /* Perceptual uniformity */
.oklch { color: oklch(0.6 0.25 30); } /* Best for gradients */

/* Wide gamut colors */
.p3 { color: color(display-p3 1 0 0); } /* Vivid red */
.rec2020 { color: color(rec2020 1 0 0); }

/* Transparent keyword */
.transparent { background: transparent; }

/* currentColor - inherits text color */
.border { border: 2px solid currentColor; }

/* Global variables in :root */
:root {
    --primary-color: #007acc;
    --secondary-color: #ff6600;
    --spacing-unit: 8px;
    --font-size-base: 16px;
    --border-radius: 4px;
}

/* Using variables */
.button {
    background: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
}

/* Scoped variables */
.dark-theme {
    --primary-color: #4fc3f7;
    --bg-color: #1e1e1e;
}

/* Fallback values */
.card {
    padding: var(--card-padding, 20px); /* 20px if not defined */
}

/* Nested var() */
.element {
    --size: 100px;
    --half: calc(var(--size) / 2);
    width: var(--half); /* 50px */
}

/* Mixed unit calculations */
.container {
    width: calc(100% - 40px);
    height: calc(100vh - 60px);
    padding: calc(1rem + 10px);
}

/* With variables */
.responsive {
    --header-height: 60px;
    --footer-height: 40px;
    height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* Complex expressions */
.grid {
    width: calc((100% - 3 * 10px) / 4); /* 4 columns with 10px gaps */
}

/* Negative values */
.offset {
    margin-left: calc(-1 * var(--spacing));
}

/* Nested calc (auto-flattened) */
.element {
    width: calc(calc(100% / 3) - 20px);
}

/* min() - maximum constraint */
.container {
    width: min(100%, 1200px); /* Never wider than 1200px */
    padding: min(5vw, 40px);  /* Responsive but capped */
}

/* max() - minimum constraint */
.button {
    font-size: max(16px, 1vw); /* Never smaller than 16px */
    padding: max(10px, 1em);
}

/* clamp() - fluid between bounds */
.heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
    /* Min: 1.5rem, Ideal: 5vw, Max: 3rem */
}

.responsive-spacing {
    margin: clamp(1rem, 3vw, 3rem);
    padding: clamp(0.5rem, 2vw, 2rem);
}

/* Combining functions */
.card {
    width: clamp(200px, 50%, 500px);
    padding: max(1rem, 2vw);
    gap: min(20px, 3%);
}

/* round() function */
.grid-item {
    /* Round to nearest 10px */
    width: round(nearest, 23.7px, 10px); /* = 20px */
    
    /* Round up */
    height: round(up, 43px, 10px); /* = 50px */
    
    /* Round down */
    margin: round(down, 47px, 10px); /* = 40px */
}

/* mod() for cyclic patterns */
.item {
    /* Alternate colors every 3 items */
    --index: 5;
    --cycle: mod(var(--index), 3); /* = 2 (5 % 3) */
}

/* rem() for remainder */
.pattern {
    --offset: rem(127px, 50px); /* = 27px */
}

/* abs() for absolute values */
.transform {
    --distance: abs(-50px); /* = 50px */
}

/* Practical example: snap to grid */
.snap-grid {
    width: round(nearest, var(--dynamic-width), 20px);
    height: round(nearest, var(--dynamic-height), 20px);
}

/* Define container */
.container {
    container-type: inline-size;
    /* or: size (both dimensions) */
    /* or: normal (default, no containment) */
    container-name: card; /* Optional name */
}

/* Use container query units inside */
.card-title {
    font-size: clamp(1rem, 5cqw, 2rem);
    /* Responsive to container width, not viewport */
}

.card-content {
    padding: 2cqw;  /* 2% of container width */
    gap: 1cqh;      /* 1% of container height */
}

/* Named container queries */
@container card (min-width: 400px) {
    .card-title {
        font-size: 3cqw; /* 3% of container named "card" */
    }
}

/* Component entirely responsive to its container */
.product-card {
    container-type: inline-size;
}

.product-title {
    font-size: clamp(0.875rem, 4cqi + 0.5rem, 1.5rem);
}

.product-image {
    width: 100%;
    height: 50cqh; /* 50% of container height */
}

/* Circular positioning */
.item {
    --angle: 45deg;
    --radius: 100px;
    
    /* Calculate x, y positions on circle */
    --x: calc(cos(var(--angle)) * var(--radius));
    --y: calc(sin(var(--angle)) * var(--radius));
    
    transform: translate(var(--x), var(--y));
}

/* Diagonal line length using Pythagorean theorem */
.diagonal {
    --width: 100px;
    --height: 100px;
    --length: hypot(var(--width), var(--height)); /* √(100² + 100²) */
}

/* Wave animation offset */
@keyframes wave {
    to {
        transform: translateY(calc(sin(var(--time)) * 20px));
    }
}

/* Circular progress indicator */
.progress-circle {
    --progress: 0.75; /* 75% */
    --angle: calc(var(--progress) * 360deg);
    background: conic-gradient(
        blue calc(var(--angle)),
        lightgray 0
    );
}

/* Scaling with easing curves */
.smooth-scale {
    --t: 0.5; /* time factor 0-1 */
    scale: calc(1 + sin(var(--t) * 3.14159));
}

/* Exponential scaling */
.exponential {
    --base: 2;
    --level: 3;
    font-size: calc(pow(var(--base), var(--level)) * 1px); /* 2³ = 8px */
}

/* Square root for maintaining aspect ratio */
.aspect-box {
    --area: 10000; /* 100 x 100 */
    width: calc(sqrt(var(--area)) * 1px); /* 100px */
    height: calc(sqrt(var(--area)) * 1px);
}

/* Logarithmic scaling (audio visualizers) */
.audio-bar {
    --frequency: 1000;
    --scale: log(var(--frequency), 10); /* log base 10 */
    height: calc(var(--scale) * 20px);
}

/* Natural exponential growth */
.growth {
    --rate: 0.5;
    scale: exp(var(--rate)); /* e^0.5 ≈ 1.648 */
}

/* Register custom property with type */
@property --gradient-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Now can animate it smoothly */
.gradient-box {
    background: linear-gradient(
        var(--gradient-angle),
        blue,
        purple
    );
    transition: --gradient-angle 1s;
}

.gradient-box:hover {
    --gradient-angle: 360deg; /* Smooth rotation */
}

/* Numeric property for smooth transitions */
@property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.progress-bar {
    --progress: 0.75;
    width: calc(var(--progress) * 100%);
    transition: --progress 500ms ease-out;
}

/* Color property for theme switching */
@property --theme-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #007acc;
}

/* Multiple types allowed */
@property --spacing {
    syntax: "<length> | <percentage>";
    inherits: true;
    initial-value: 1rem;
}

/* Universal syntax (any value) */
@property --custom-value {
    syntax: "*";
    inherits: false;
    initial-value: auto;
}

/* Length with specific constraints */
@property --max-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 1200px;
}

/* Usage in animations */
@keyframes colorChange {
    from { --theme-color: blue; }
    to { --theme-color: red; }
}

.animated {
    animation: colorChange 2s infinite;
    background: var(--theme-color);
}