Modern CSS Features

:root {
  /* Color palette */
  --color-primary: #0066cc;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-bg: #ffffff;
  --color-text: #333333;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;

  /* Typography */
  --font-family: "Roboto", system-ui, sans-serif;
  --font-size-base: 16px;
  --line-height: 1.6;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

.button {
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
}

.card {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
}

.element {
  color: var(--color-brand, #0066cc);          /* If --color-brand is not defined, use #0066cc */
  padding: var(--spacing-md, 16px);             /* Fallback to 16px */
}

/* Global values in :root */
:root { --bg: white; --text: black; }

/* Dark mode override */
.dark-mode {
  --bg: #1a1a2e;
  --text: #e0e0e0;
}

/* Component-level override */
.alert-danger {
  --color-primary: var(--color-danger);
}

/* Usage */
body {
  background: var(--bg);
  color: var(--text);
}

// Set a variable
document.documentElement.style.setProperty('--color-primary', '#ff6600');

// Get a variable
getComputedStyle(document.documentElement).getPropertyValue('--color-primary');

// Toggle dark mode
document.body.classList.toggle('dark-mode');

/* Define a container */
.card-container {
  container-type: inline-size;
  container-name: cards;
}

/* Query the container */
@container cards (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
  }
}

@container cards (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

.card {
  font-size: clamp(0.875rem, 4cqi, 1.25rem);
  /* cqi = 1% of container's inline size */
  /* cqw = 1% of container's width */
  /* cqh = 1% of container's height */
  padding: 2cqi;
}

/* Before nesting */
.card { ... }
.card .header { ... }
.card .body { ... }
.card .body p { ... }
.card.is-active { ... }

/* After nesting */
.card {
  padding: 16px;

  & .header {
    font-weight: bold;
  }

  & .body {
    & p {
      line-height: 1.6;
    }
  }

  &.is-active {
    border-color: blue;
  }
}

.card {
  display: grid;
  grid-template-columns: 1fr;

  @media (min-width: 768px) {
    grid-template-columns: 200px 1fr;
  }
}

/* Define layer order (first = lowest priority) */
@layer reset, framework, components, utilities;

/* Add styles to layers */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
  }
}

@layer framework {
  .btn { padding: 8px 16px; border-radius: 4px; }
}

@layer components {
  .btn-primary { background: blue; color: white; }
}

/* Unlayered styles go ON TOP of all layers (highest priority) */
.urgent { background: red !important; } /* Avoid this */

/* Style a card that contains an image */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

/* Style a form group that has an error */
.form-group:has(.error) {
  border-color: red;
}

/* Style a parent that contains a checked checkbox */
.fieldset:has(input:checked) {
  background: #f0fff0;
}

/* Style a section that contains a heading */
section:has(h2) {
  padding-top: 40px;
}

/* Multiple conditions */
.card:has(img):has(.badge) {
  position: relative;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: #0066cc;
}

html {
  scroll-behavior: smooth;   /* Smooth anchor scrolling */
}
/* For individual elements */
.element {
  scroll-behavior: smooth;
  scroll-margin-top: 80px;   /* Offset for fixed headers */
}

h1 {
  text-wrap: balance;          /* Balanced line wrapping for headings */
}
p {
  text-wrap: pretty;           /* Prevents orphaned words */
}

.button {
  --brand: #0066cc;
  background: var(--brand);
}
.button:hover {
  background: color-mix(in srgb, var(--brand), black 20%);
  /* Darkens the brand color without knowing what it is */
}

.card {
  background: color-mix(in srgb, var(--brand), white 90%);
  /* Tints the brand color for a subtle background */
}

@supports (container-type: inline-size) {
  /* Container query styles */
}
@supports selector(:has(*)) {
  /* :has() styles */
}