Responsive

beta

Farn defines two breakpoint reference values as tokens: --breakpoint-mobile (640 px) and --breakpoint-tablet (768 px). CSS custom properties cannot be used inside @media conditions directly, so the tokens act as the canonical reference — every media query in the codebase is annotated with the corresponding token name in a comment so the connection is always visible and a project-wide search finds all breakpoint usage immediately.

Breakpoint tokens

Token	Value	Use
--breakpoint-mobile	640px	Single-column stack, mobile nav drawer, reduced padding
--breakpoint-tablet	768px	Multi-column grid collapse, reduced gap between sections

Usage pattern

CSS custom properties are not supported inside @media (...) conditions by any browser. Instead, write the literal pixel value and add an inline comment naming the token. This keeps media queries greppable and ties each one back to the token system without requiring a build tool.

/* ✓ correct — literal value + token annotation */
@media (max-width: 640px) /* --breakpoint-mobile */ {
  .grid { grid-template-columns: 1fr; }
}

/* ✗ incorrect — custom properties do not work in @media */
@media (max-width: var(--breakpoint-mobile)) { ... }

When you add a new media query, search for --breakpoint-mobile first to see how existing rules are written, then follow the same comment pattern.