/* Code generated by react55c; DO NOT EDIT. */

:root {
	--r55-color-accent: #475564;
	--r55-color-bg: #f7f5f1;
	--r55-color-body: #192029;
	--r55-color-card: #e7ecf0;
	--r55-color-heading: #0c121a;
	--r55-color-muted: #646b73;
	--r55-surface-default: #f7f5f1;
	--r55-ink-default: #475564;
	--r55-font-body_px: 16px;
	--r55-font-heading_px: 24px;
	--r55-font-secondary_px: 14px;
	--r55-space-lg_px: 24px;
	--r55-space-md_px: 16px;
	--r55-space-sm_px: 8px;
	--r55-corner-radius: 6px;
}

:root[data-theme="clair"] {
	--r55-color-accent: #475564;
	--r55-color-bg: #f7f5f1;
	--r55-color-body: #192029;
	--r55-color-card: #e7ecf0;
	--r55-color-heading: #0c121a;
	--r55-color-muted: #646b73;
	--r55-surface-default: #f7f5f1;
	--r55-ink-default: #475564;
	--r55-font-body_px: 16px;
	--r55-font-heading_px: 24px;
	--r55-font-secondary_px: 14px;
	--r55-space-lg_px: 24px;
	--r55-space-md_px: 16px;
	--r55-space-sm_px: 8px;
	--r55-corner-radius: 6px;
}

:root[data-theme="dark"] {
	--r55-color-accent: #8aa4a9;
	--r55-color-bg: #0e141c;
	--r55-color-body: #dde2e8;
	--r55-color-card: #171d26;
	--r55-color-heading: #f0eee9;
	--r55-color-muted: #7d858d;
	--r55-surface-default: #0e141c;
	--r55-ink-default: #8aa4a9;
	--r55-font-body_px: 16px;
	--r55-font-heading_px: 24px;
	--r55-font-secondary_px: 14px;
	--r55-space-lg_px: 24px;
	--r55-space-md_px: 16px;
	--r55-space-sm_px: 8px;
	--r55-corner-radius: 6px;
}

:root[data-theme="light"] {
	--r55-color-accent: #475564;
	--r55-color-bg: #f7f5f1;
	--r55-color-body: #192029;
	--r55-color-card: #e7ecf0;
	--r55-color-heading: #0c121a;
	--r55-color-muted: #646b73;
	--r55-surface-default: #f7f5f1;
	--r55-ink-default: #475564;
	--r55-font-body_px: 16px;
	--r55-font-heading_px: 24px;
	--r55-font-secondary_px: 14px;
	--r55-space-lg_px: 24px;
	--r55-space-md_px: 16px;
	--r55-space-sm_px: 8px;
	--r55-corner-radius: 6px;
}

:root[data-theme="sombre"] {
	--r55-color-accent: #8aa4a9;
	--r55-color-bg: #0e141c;
	--r55-color-body: #dde2e8;
	--r55-color-card: #171d26;
	--r55-color-heading: #f0eee9;
	--r55-color-muted: #7d858d;
	--r55-surface-default: #0e141c;
	--r55-ink-default: #8aa4a9;
	--r55-font-body_px: 16px;
	--r55-font-heading_px: 24px;
	--r55-font-secondary_px: 14px;
	--r55-space-lg_px: 24px;
	--r55-space-md_px: 16px;
	--r55-space-sm_px: 8px;
	--r55-corner-radius: 6px;
}

body, main, section, article, header, nav, aside, footer {
	background-color: var(--r55-surface-default);
	color: var(--r55-ink-default);
	margin: 0;
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--r55-ink-default);
	font-weight: 600;
}

dl, dt, dd, ol, ul, li {
	margin: 0;
	padding: 0;
}

table, thead, tbody, tfoot, tr, th, td, caption {
	border-collapse: collapse;
	text-align: left;
}

form, fieldset, legend, label, input, select, textarea, button {
	font-family: inherit;
	border-radius: var(--r55-corner-radius);
}

.r55-num, td[data-numeric="true"], th[data-numeric="true"], output {
	font-variant-numeric: tabular-nums;
}

[data-state] {
	transition: opacity 120ms linear;
}

[data-variant] {
	border-style: solid;
	border-width: 1px;
}

[aria-invalid="true"] {
	outline: 2px solid currentColor;
}

body, .hh-body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: var(--r55-font-body_px);
	line-height: 1.55;
	min-height: 100vh;
	background-color: var(--r55-color-bg);
	color: var(--r55-color-body);
}

main, .hh-shell {
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--r55-space-lg_px);
}

main > header, body > header, .hh-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--r55-space-md_px);
	padding: var(--r55-space-md_px) var(--r55-space-lg_px);
	margin-bottom: var(--r55-space-lg_px);
	background-color: var(--r55-color-card);
	border: 1px solid var(--r55-color-accent);
	border-radius: var(--r55-corner-radius);
}

nav, .hh-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--r55-space-sm_px);
}

nav a, .hh-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--r55-corner-radius);
	border: 1px solid var(--r55-color-muted);
	background-color: var(--r55-color-bg);
	color: var(--r55-color-heading);
	text-decoration: none;
	font-size: var(--r55-font-secondary_px);
	font-weight: 600;
}

nav a:hover, .hh-pill:hover {
	border-color: var(--r55-color-accent);
	background-color: var(--r55-color-accent);
	color: var(--r55-color-bg);
}

.hh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: var(--r55-space-lg_px);
	align-items: start;
}

section, article, aside, .hh-card {
	background-color: var(--r55-color-card);
	border: 1px solid var(--r55-color-muted);
	border-radius: var(--r55-corner-radius);
	padding: var(--r55-space-lg_px);
	margin-bottom: var(--r55-space-md_px);
	box-shadow: 0 2px 8px rgba(12, 18, 26, 0.06);
}

h1 {
	font-size: var(--r55-font-heading_px);
	color: var(--r55-color-heading);
	margin: 0 0 4px 0;
}

h2, h3 {
	color: var(--r55-color-heading);
	margin: 0 0 var(--r55-space-md_px) 0;
}

p {
	margin: 0 0 var(--r55-space-md_px) 0;
}

[data-variant="alert"], [data-variant="error"], .hh-alert {
	border-left: 4px solid var(--r55-color-accent);
	background-color: var(--r55-color-bg);
	padding: var(--r55-space-md_px);
}

form {
	display: flex;
	flex-direction: column;
	gap: var(--r55-space-md_px);
}

fieldset {
	border: 1px solid var(--r55-color-muted);
	padding: var(--r55-space-md_px);
	margin: 0;
}

legend {
	font-weight: 600;
	padding: 0 var(--r55-space-sm_px);
	color: var(--r55-color-heading);
}

label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 600;
	font-size: var(--r55-font-secondary_px);
	color: var(--r55-color-heading);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input:not([type]), select, textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--r55-color-muted);
	border-radius: var(--r55-corner-radius);
	background-color: var(--r55-color-bg);
	color: var(--r55-color-body);
	font-size: var(--r55-font-body_px);
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
	outline: 2px solid var(--r55-color-accent);
	outline-offset: 1px;
}

button, input[type="submit"], .hh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--r55-space-sm_px);
	padding: 10px 18px;
	border: 1px solid var(--r55-color-accent);
	border-radius: var(--r55-corner-radius);
	background-color: var(--r55-color-accent);
	color: var(--r55-color-bg);
	font-size: var(--r55-font-body_px);
	font-weight: 600;
	cursor: pointer;
}

button:hover, input[type="submit"]:hover, .hh-btn:hover {
	opacity: 0.92;
}

button[data-variant="secondary"], .hh-btn[data-variant="secondary"] {
	background-color: var(--r55-color-bg);
	color: var(--r55-color-heading);
	border-color: var(--r55-color-muted);
}

dl {
	display: grid;
	grid-template-columns: minmax(140px, auto) 1fr;
	gap: var(--r55-space-sm_px) var(--r55-space-md_px);
	margin-bottom: var(--r55-space-md_px);
}

dt {
	font-weight: 600;
	color: var(--r55-color-muted);
}

dd {
	color: var(--r55-color-heading);
}

ol, ul {
	list-style-position: inside;
	display: flex;
	flex-direction: column;
	gap: var(--r55-space-sm_px);
	margin-bottom: var(--r55-space-md_px);
}

ol > li, ul > li {
	padding: var(--r55-space-sm_px) var(--r55-space-md_px);
	background-color: var(--r55-color-bg);
	border: 1px solid var(--r55-color-muted);
	border-radius: var(--r55-corner-radius);
}

table {
	width: 100%;
	margin-top: var(--r55-space-sm_px);
	margin-bottom: var(--r55-space-md_px);
}

th, td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--r55-color-muted);
}

th {
	font-size: var(--r55-font-secondary_px);
	color: var(--r55-color-muted);
	background-color: var(--r55-color-bg);
}

pre, code, output {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: var(--r55-font-secondary_px);
}

pre {
	padding: var(--r55-space-md_px);
	background-color: var(--r55-color-bg);
	border: 1px solid var(--r55-color-muted);
	border-radius: var(--r55-corner-radius);
	overflow-x: auto;
	white-space: pre-wrap;
}