/* Roboto — primary font for every Kuvrr UI component. Imported here so
this stylesheet is self-sufficient (no reliance on layout.html
tags). MUST stay at the very top of the file — @import rules are only
valid before any other CSS rule. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
/* ═══════════════════════════════════════════════════════════════════════════
KUVRR GLOBAL UI COMPONENTS
───────────────────────────────────────────────────────────────────────────
Purpose:
Single source of truth for shared, app-wide UI primitives (page headers,
form controls, labels, values, etc). Edit a class here ONCE and the
change propagates to every page that uses it.
Loading order:
This file is linked in shared/layout.html AFTER kuvrr-standard.css.
It defines the design tokens (see section 0) and the canonical base
components; rules here win the cascade against page-specific kv-*
overrides in kuvrr-standard.css. Treat the kvgl-* design system as
authoritative — when you spot a kv-* override in kuvrr-standard.css
that conflicts with a kvgl-* rule, delete the override rather than
boosting specificity here.
How to add a component:
1. Confirm CLAUDE.md / kuvrr-standard.css does not already define a class for it.
2. Name it with the MANDATORY `kvgl-` prefix (e.g. .kvgl-form-label).
Every class in THIS file must start with `kvgl-`; non-global/page-specific
classes belong in kuvrr-standard.css under the `kv-` prefix instead.
3. Add the class block under the matching SECTION below (or create a
new SECTION with a banner comment).
4. Document the intended markup, tokens used, and any required
parent context directly above the rule.
5. NEVER write inline