/* Open Beekeeping design system v2: generated from src/tokens.json by scripts/build.mjs. Do not edit. */
@font-face {
	font-family: "Martian Mono SemiCondensed";
	src: url("../fonts/MartianMono-SemiCondensed.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: dark;
	--surface: #0e1112;
	--surface-raised: #171b1d;
	--surface-sunken: #080a0b;
	--surface-hover: #252b2e;
	--line: #2a3033;
	--line-strong: #727a7d;
	--ink: #eef1ee;
	--ink-muted: #a3aba8;
	--brand: #ffd60a;
	--brand-hover: #ffe45c;
	--on-brand: #101314;
	--brand-ink: #ffd60a;
	--sub-apiary: #35d0c0;
	--on-sub-apiary: #04211e;
	--sub-bka: #a79bff;
	--on-sub-bka: #130c3d;
	--sub-spare: #ff8fcf;
	--on-sub-spare: #3b0a27;
	--ok: #93d94e;
	--warn: #ffb454;
	--alert: #ff7b72;
	--focus-ring: #ffd60a;
	--font-mono: "Martian Mono SemiCondensed", "Martian Mono", ui-monospace, Menlo, Consolas, monospace;
	--font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-pill: 999px;
}

:root[data-theme="light"] {
	color-scheme: light;
	--surface: #f3f4f1;
	--surface-raised: #ffffff;
	--surface-sunken: #e9ebe6;
	--surface-hover: #e2e5df;
	--line: #d9dcd6;
	--line-strong: #6c716b;
	--ink: #101314;
	--ink-muted: #525855;
	--brand: #ffd60a;
	--brand-hover: #f2c900;
	--on-brand: #101314;
	--brand-ink: #665500;
	--sub-apiary: #0a7c72;
	--on-sub-apiary: #ffffff;
	--sub-bka: #5746d1;
	--on-sub-bka: #ffffff;
	--sub-spare: #b0277a;
	--on-sub-spare: #ffffff;
	--ok: #366900;
	--warn: #874f00;
	--alert: #b42318;
	--focus-ring: #101314;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;
		--surface: #f3f4f1;
		--surface-raised: #ffffff;
		--surface-sunken: #e9ebe6;
		--surface-hover: #e2e5df;
		--line: #d9dcd6;
		--line-strong: #6c716b;
		--ink: #101314;
		--ink-muted: #525855;
		--brand: #ffd60a;
		--brand-hover: #f2c900;
		--on-brand: #101314;
		--brand-ink: #665500;
		--sub-apiary: #0a7c72;
		--on-sub-apiary: #ffffff;
		--sub-bka: #5746d1;
		--on-sub-bka: #ffffff;
		--sub-spare: #b0277a;
		--on-sub-spare: #ffffff;
		--ok: #366900;
		--warn: #874f00;
		--alert: #b42318;
		--focus-ring: #101314;
	}
}

/* Type styles */
.display {
	font-family: var(--font-mono);
	font-size: 40px;
	line-height: 48px;
	font-weight: 700;
	letter-spacing: -0.05em;
}
.heading {
	font-family: var(--font-mono);
	font-size: 26px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -0.05em;
}
.title {
	font-family: var(--font-mono);
	font-size: 19px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: -0.04em;
}
.body {
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0;
}
.body-strong {
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0;
}
.small {
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: 0;
}
.label {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: lowercase;
}
.code {
	font-family: var(--font-mono);
	font-size: 12px;
	line-height: 20px;
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* Components */
/* Open Beekeeping components. Plain CSS classes, no JavaScript.
   Load tokens.css first; set data-theme="dark" or "light" on <html>. */

/* Product colour. Put data-product="apiary" (or "bka", "spare", "parent") on any
   ancestor, usually <body>. Only the logo cell, icon tile and product badge read it. */
[data-product="parent"],[data-product="parent"] [data-theme]{--ob-p:var(--brand);--ob-on-p:var(--on-brand)}
[data-product="apiary"],[data-product="apiary"] [data-theme]{--ob-p:var(--sub-apiary);--ob-on-p:var(--on-sub-apiary)}
[data-product="bka"],[data-product="bka"] [data-theme]{--ob-p:var(--sub-bka);--ob-on-p:var(--on-sub-bka)}
[data-product="spare"],[data-product="spare"] [data-theme]{--ob-p:var(--sub-spare);--ob-on-p:var(--on-sub-spare)}

/* Monospace word spaces are wide; pull headings and labels together. */
.display,.heading,.title{word-spacing:-.2em;text-wrap:balance}
.label,.code{word-spacing:-.15em}

/* Logo */
.ob-lockup{display:inline-flex;align-items:center;gap:.42em;font-family:var(--font-mono);font-weight:400;letter-spacing:-.06em;line-height:1.1;color:var(--ink-muted);white-space:nowrap;text-decoration:none}
.ob-lockup b{font-weight:700;color:var(--ink)}
.ob-mark{display:block;flex:none;width:1.2em;height:1.2em}
.ob-mark__frame{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter}
.ob-mark__cell{fill:var(--ob-p,var(--brand))}
.ob-icon{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--radius-sm);background:var(--ob-p,var(--brand))}
.ob-icon--sm{width:24px;height:24px}
.ob-icon .ob-mark{width:64%;height:64%}
.ob-icon .ob-mark__frame{stroke:var(--ob-on-p,var(--on-brand))}
.ob-icon .ob-mark__cell{fill:var(--ob-on-p,var(--on-brand))}

/* Link */
.ob-link{color:var(--brand-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ob-link:hover{text-decoration-thickness:2px}
.ob-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Button */
.ob-btn{appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:36px;padding:var(--space-2) var(--space-4);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--ink);font-family:var(--font-mono);font-size:11px;line-height:16px;font-weight:600;letter-spacing:0.02em;word-spacing:-.15em;text-transform:lowercase;text-decoration:none;white-space:nowrap;cursor:pointer}
.ob-btn:hover{background:var(--surface-hover)}
.ob-btn:active{transform:translateY(1px)}
.ob-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ob-btn--primary{background:var(--brand);border-color:var(--on-brand);color:var(--on-brand)}
.ob-btn--primary:hover{background:var(--brand-hover)}
.ob-btn--quiet{border-color:transparent}
.ob-btn--lg{min-height:48px;padding:var(--space-3) var(--space-6);font-size:13px}
.ob-btn:disabled,.ob-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.ob-btn:disabled:hover,.ob-btn[aria-disabled="true"]:hover{background:transparent}
.ob-btn--primary:disabled:hover,.ob-btn--primary[aria-disabled="true"]:hover{background:var(--brand)}

/* Badge */
.ob-badge{box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:2px var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink);font-family:var(--font-mono);font-size:11px;line-height:16px;font-weight:600;letter-spacing:0.02em;word-spacing:-.15em;text-transform:lowercase;white-space:nowrap}
.ob-badge--product{background:var(--ob-p,var(--brand));border-color:var(--ob-on-p,var(--on-brand));color:var(--ob-on-p,var(--on-brand))}
.ob-badge--ok{color:var(--ok);border-color:var(--ok)}
.ob-badge--warn{color:var(--warn);border-color:var(--warn)}
.ob-badge--alert{color:var(--alert);border-color:var(--alert)}
.ob-badge--ok::before,.ob-badge--warn::before,.ob-badge--alert::before{content:"";flex:none;width:8px;height:8px;background:currentColor}
.ob-badge--warn::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.ob-badge--alert::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* Card */
.ob-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-6);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink)}
.ob-card__kicker{color:var(--brand-ink);font-family:var(--font-mono);font-size:11px;line-height:16px;font-weight:600;letter-spacing:0.02em;word-spacing:-.15em;text-transform:lowercase}
.ob-card__kicker::before{content:"// "}
.ob-card__title{margin:0;font-family:var(--font-mono);font-size:19px;line-height:28px;font-weight:700;letter-spacing:-0.04em;word-spacing:-.2em;text-wrap:balance}
.ob-card__body{margin:0;color:var(--ink-muted);font-family:var(--font-sans);font-size:15px;line-height:24px;font-weight:400;letter-spacing:0}
.ob-card__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}

/* Field */
.ob-field{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1);color:var(--ink)}
.ob-field__label{font-family:var(--font-mono);font-size:11px;line-height:16px;font-weight:600;letter-spacing:0.02em;word-spacing:-.15em;text-transform:lowercase}
.ob-input{appearance:none;box-sizing:border-box;width:100%;min-height:40px;padding:var(--space-2) var(--space-3);background:var(--surface-raised);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:24px;font-weight:400;letter-spacing:0}
.ob-input::placeholder{color:var(--ink-muted);opacity:1}
.ob-input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ob-field__help{color:var(--ink-muted);font-family:var(--font-sans);font-size:13px;line-height:20px;font-weight:400;letter-spacing:0}
.ob-field--error .ob-input{border-color:var(--alert)}
.ob-field--error .ob-field__help{color:var(--alert)}

/* Readout */
.ob-readout{box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.ob-readout__item{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);background:var(--surface-sunken)}
.ob-readout__label{color:var(--ink-muted);font-family:var(--font-mono);font-size:11px;line-height:16px;font-weight:600;letter-spacing:0.02em;word-spacing:-.15em;text-transform:lowercase}
.ob-readout__value{margin:0;color:var(--ink);font-family:var(--font-mono);font-size:19px;line-height:28px;font-weight:700;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-readout__unit{margin-left:.3em;color:var(--ink-muted);font-size:11px;font-weight:400;letter-spacing:0}

/* Code block */
.ob-code{box-sizing:border-box;margin:0;padding:var(--space-3) var(--space-4);background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-family:var(--font-mono);font-size:12px;line-height:20px;font-weight:400;letter-spacing:-0.02em;white-space:pre;overflow-x:auto;tab-size:2}
.ob-code:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ob-code__prompt{color:var(--brand-ink);user-select:none}
.ob-code__comment{color:var(--ink-muted)}

/* Header */
.ob-header{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-6);padding:var(--space-3) var(--space-6);background:var(--surface);border-bottom:1px solid var(--line)}
.ob-header .ob-lockup{font-size:18px}
.ob-header .ob-lockup:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.ob-header__nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-left:auto}
.ob-header__link{padding:var(--space-2) 0;border-bottom:2px solid transparent;color:var(--ink-muted);font-family:var(--font-mono);font-size:11px;line-height:16px;font-weight:600;letter-spacing:0.02em;word-spacing:-.15em;text-transform:lowercase;text-decoration:none}
.ob-header__link:hover{color:var(--ink)}
.ob-header__link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.ob-header__link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}