Day 3: CSS Custom Properties & Modern Math

Daily Objective

Implement modern CSS variables and fluid sizing with calc() and clamp().

1. CSS Custom Properties (Variables)

:root {
  --color-primary: #3b82f6;
  --color-text: #1e293b;
  --font-base: 'Inter', sans-serif;
}

button {
  background-color: var(--color-primary);
  color: white;
}

2. Fluid Typography with clamp()

/* clamp(min, preferred, max) */
h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
}

Daily Hands-on Practice (70%)

1. Extract colors, margins, and typography into a :root variables block.
2. Replace static font-size on your headings with fluid clamp().