Breakpoints 1.2.0

Five viewport mins as CSS variables. Responsive utilities emit through xl; 2xl is token + grammar today (ADR 0016).
Read this page in English

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Write custom @media (width >= …) using --velin-bp-* values (or the documented rem literals).
Compose with responsive utilities: .velin-md-flex, .velin-lg-p-8.

When not

Do not invent a sixth informal breakpoint.
Do not assume 2xl utility classes exist yet — token only until Utility Engine expansion.

Available breakpoints

Name	Infix	Min-width	CSS variable
Extra small	none	0	—
Small	`sm`	`36rem` / 576px	`--velin-bp-sm`
Medium	`md`	`48rem` / 768px	`--velin-bp-md`
Large	`lg`	`62rem` / 992px	`--velin-bp-lg`
Extra large	`xl`	`80rem` / 1280px	`--velin-bp-xl`
2X large	`2xl`	`96rem` / 1536px	`--velin-bp-2xl`

Source: src/layout/breakpoints.css. Media queries in utilities may still use literal rem until tokens are wired (ADR 0016 honesty).

CSS variables

:root {
  --velin-bp-sm: 36rem;
  --velin-bp-md: 48rem;
  --velin-bp-lg: 62rem;
  --velin-bp-xl: 80rem;
  --velin-bp-2xl: 96rem;
}

Min-width media queries

@media (width >= 48rem) {
  /* md and up */
}

Responsive utilities

Pattern .velin-{bp}-{utility}. Display ownership: base in display.css, variants in responsive.css — see Display.

<div class="velin-hidden velin-md-block">…</div>
<div class="velin-p-4 velin-lg-p-8">…</div>