/* =============================================================================
 * Campmoney design language — the SINGLE source of the family's frontend design
 * tokens (fonts, type scale, spacing, radius, shadows) and base principles.
 *
 * Lives once in saas-common; every app/landing loads it (served at
 * /campmoney-ui.css by each Java app, copied into each *-web/ landing at deploy).
 * BRAND-specific values (accent colour, gradient) do NOT live here — they come
 * from /brand.css, generated from the Java Brand, so there is still ONE source
 * of truth per concern: design = this file, brand = the Brand.
 *
 * PRINCIPLES (elvek)
 *  - Type: one family (Inter). Use the --fs-* scale, not ad-hoc px.
 *  - Spacing: 4px base; use the --sp-* scale for paddings/margins/gaps.
 *  - Radius: --radius-sm controls (8), --radius cards (10), --radius-lg panels (14),
 *    --radius-pill chips/badges.
 *  - Colour: one accent (from /brand.css). Light backgrounds/borders are tints of
 *    it (--accent-soft); neutrals (--ink/--muted/--line) are brandless greys here.
 *  - Components: primary button = filled accent; ghost = outline; modals centre on a
 *    scrim; toasts bottom; badges = pill. Keep these consistent across apps.
 *  - Tables & actions: EVERY list entity has a detail view (részletező) — the row is
 *    clickable (.rowlink) and opens it; the full set of function buttons lives THERE
 *    (modal/panel footer or header). The row itself stays clean: data + status badges.
 *    Inline action buttons in the last cell are allowed only as shortcuts and MAX 2
 *    (right-aligned .mini / .mini.danger). Need a 3rd action? It belongs in the detail
 *    view, not the row.
 *  - Button style by context (the SAME action must look the SAME in the same context):
 *    in a popup/detail (felugró) it is a FULL filled button (.act; destructive = .act.danger
 *    red-filled) — same size as every other modal's buttons, never .mini. In a table row the
 *    shortcut is the SMALL OUTLINE variant (.mini / .mini.danger). E.g. Delete = red filled
 *    .act.danger in the detail modal, outline .mini.danger in the row.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	/* ---- type ---- */
	--font-sans: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-2xs: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 14px;
	--fs-md: 15px;
	--fs-lg: 17px;
	--fs-xl: 19px;
	--fs-2xl: 24px;
	--fs-3xl: 28px;
	--lh-tight: 1.2;
	--lh-normal: 1.55;

	/* ---- spacing (4px base) ---- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;

	/* ---- radius ---- */
	--radius-sm: 8px;
	--radius: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* ---- elevation ---- */
	--shadow-sm: 0 1px 2px rgba(20, 16, 40, .06);
	--shadow: 0 4px 16px rgba(20, 16, 40, .10);

	/* ---- neutral palette (brandless; accent + accent-soft come from /brand.css) ---- */
	--ink: #1b1626;
	--muted: #6b6377;
	--line: #ece7f3;
	--card: #ffffff;
	--ok: #16a34a;
	--err: #dc2626;

	/* ---- layout ---- */
	--sidebar-w: 224px;
}