/**
 * DoliQonto shared UI tokens.
 *
 * Design tokens ONLY: colours, spacing, radii, typography, badge palette,
 * breakpoints. No component rules here, on purpose.
 *
 * Ownership contract for the 1.5.0-ui work (issues #95 and #96): this file is
 * frozen and owned by the integrator. Component rules live in:
 *   css/qonto-widget.css        deposit widget (issue #95)
 *   css/qonto-transactions.css  transaction table and detail pane (issue #96)
 * Two files, two owners, so the two workstreams cannot conflict over CSS.
 *
 * Visual direction: the codes Qonto uses, not Qonto's brand. Light background,
 * rounded cards, restrained typography, coloured state badges. Never any inline
 * style in the PHP.
 *
 * Note: the pre-existing css/qonto.css is NOT loaded by anything (no module_parts
 * entry, no page include). It is dead weight kept for now so nothing silently
 * changes appearance; the two files above supersede it.
 */

:root {
	/* Surfaces */
	--qonto-bg: #f7f8fa;
	--qonto-surface: #ffffff;
	--qonto-surface-alt: #f1f3f6;
	--qonto-border: #e2e6ec;
	--qonto-border-strong: #cbd2dc;

	/* Text */
	--qonto-text: #1c2230;
	--qonto-text-muted: #667085;
	--qonto-text-inverse: #ffffff;

	/* Accent, used for focus rings and primary actions */
	--qonto-accent: #1f6feb;
	--qonto-accent-hover: #1a5fd0;
	--qonto-focus-ring: 0 0 0 3px rgba(31, 111, 235, 0.35);

	/* Amounts: a debit and a credit must be tellable apart at a glance */
	--qonto-amount-debit: #b42318;
	--qonto-amount-credit: #067647;

	/* State badges: sent, seen, imported, matched, failed, plus neutral */
	--qonto-badge-sent-bg: #eef4ff;
	--qonto-badge-sent-fg: #1f4ba8;
	--qonto-badge-seen-bg: #fff7e6;
	--qonto-badge-seen-fg: #8a5a00;
	--qonto-badge-imported-bg: #ecfdf3;
	--qonto-badge-imported-fg: #067647;
	--qonto-badge-matched-bg: #e6f4ff;
	--qonto-badge-matched-fg: #0b5cad;
	--qonto-badge-failed-bg: #fef3f2;
	--qonto-badge-failed-fg: #b42318;
	--qonto-badge-neutral-bg: #f1f3f6;
	--qonto-badge-neutral-fg: #475467;

	/* Spacing scale */
	--qonto-space-1: 4px;
	--qonto-space-2: 8px;
	--qonto-space-3: 12px;
	--qonto-space-4: 16px;
	--qonto-space-5: 24px;
	--qonto-space-6: 32px;

	/* Radii and elevation */
	--qonto-radius-sm: 6px;
	--qonto-radius: 10px;
	--qonto-radius-lg: 14px;
	--qonto-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
	--qonto-shadow-pane: -8px 0 24px rgba(16, 24, 40, 0.12);

	/* Typography */
	--qonto-font-size-sm: 12px;
	--qonto-font-size: 13px;
	--qonto-font-size-lg: 15px;
	--qonto-font-size-xl: 18px;
	--qonto-line-height: 1.45;
	--qonto-font-weight-strong: 600;

	/* Touch targets, so the mobile layout is actually usable */
	--qonto-tap-target: 44px;

	/* Detail pane */
	--qonto-pane-width: 460px;
	--qonto-pane-z: 1200;
	--qonto-modal-z: 1300;
}

/*
 * Single breakpoint on purpose: the acceptance criterion is 360 px wide, so what
 * matters is one clean switch between the dense desktop table and the stacked
 * mobile cards, not a ladder of sizes.
 *   @media (max-width: 767px) { ... }
 */