/* recital: Recital, a Logicboks product. Monochrome ink on the round 4 shell.
 * Generated by scripts/build_tokens.py. Do not edit. */
@font-face { font-family: Inter; src: url("../fonts/Inter-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("../fonts/Inter-Italic-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Manrope; src: url("../fonts/manrope-variable.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: Archivo; src: url("../fonts/Archivo-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
:root,
[data-theme="light"] {
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --font-figure: var(--font-sans);
  --figure-weight: 300;
  --canvas-base: #f5f5f5;
  --dot-color-base: #cbcbcb;
  --dot-size: 1px;
  --dot-spacing: 24px;
  --card: #ffffff;
  --surface-2: #fafafa;
  --background: var(--card);
  --muted: #f0f0f0;
  --accent: #f5f5f5;
  --accent-hover: #f0f0f0;
  --border: #e8e8e8;
  --line-strong: #d9d9d9;
  --input: #e5e5e5;
  --ring: #cccccc;
  --foreground: #242424;
  --ink-2: #3d3d3d;
  --muted-foreground: #666666;
  --faint: #9a9a9a;
  --placeholder: #a8a8a8;
  --primary: #1a1a1a;
  --primary-foreground: #ffffff;
  --state-fine: #16a34a;
  --state-fine-text: #15803d;
  --state-warn: #ca8a04;
  --state-warn-text: #a16207;
  --state-crit: #dc2626;
  --state-crit-text: #b91c1c;
  --state-info: #2563eb;
  --state-info-text: #1d4ed8;
  --state-pending: #a3a3a3;
  --state-offline: #b3b3b3;
  --card-glass: color-mix(in srgb, var(--card) 62%, transparent);
  --backdrop-panel: blur(18px) saturate(180%) brightness(1.02);
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-window: 28px;
  --radius-full: 999px;
  --shadow-mini: 0 2px 8px rgba(76, 76, 76, 0.15);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-popover: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --t-instant: 90ms;
  --t-quick: 160ms;
  --t-settle: 280ms;
  --t-travel: 400ms;
  --t-exit: 120ms;
  --topbar-h: 56px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 68px;
  --shell-gap: 12px;
  --brand: #1a1a1a;
  --brand-display: #1a1a1a;
  --brand-on-dark: #ffffff;
  --brand-soft: #f0f0f0;
  --mark: #171719;
  --mark-on-dark: #ffffff;
  --ink-stage: #171719;
  --state-fine-tint: color-mix(in srgb, var(--state-fine) 12%, transparent);
  --state-warn-tint: color-mix(in srgb, var(--state-warn) 12%, transparent);
  --state-crit-tint: color-mix(in srgb, var(--state-crit) 12%, transparent);
  --state-info-tint: color-mix(in srgb, var(--state-info) 12%, transparent);
  --success: var(--state-fine);
  --success-text: var(--state-fine-text);
  --warning: var(--state-warn);
  --warning-text: var(--state-warn-text);
  --info: var(--state-info);
  --info-text: var(--state-info-text);
  --destructive: var(--state-crit);
  --destructive-text: var(--state-crit-text);
  --duration-fast: var(--t-quick);
  --duration-normal: var(--t-settle);
  --duration-slow: var(--t-travel);
  --ease-spring: var(--ease-out);
  color-scheme: light;
}
[data-theme="dark"] {
  --canvas-base: #1a1a1a;
  --dot-color-base: rgba(255, 255, 255, 0.12);
  --card: #232323;
  --surface-2: #2a2a2a;
  --muted: #333333;
  --accent: #2c2c2c;
  --accent-hover: #333333;
  --border: #333333;
  --line-strong: #444444;
  --input: #333333;
  --ring: #555555;
  --foreground: #ffffff;
  --ink-2: #d4d4d4;
  --muted-foreground: #999999;
  --faint: #777777;
  --placeholder: #6b6b6b;
  --primary: #ffffff;
  --primary-foreground: #000000;
  --state-fine: #4ade80;
  --state-fine-text: #4ade80;
  --state-warn: #facc15;
  --state-warn-text: #facc15;
  --state-crit: #f87171;
  --state-crit-text: #f87171;
  --state-info: #60a5fa;
  --state-info-text: #60a5fa;
  --state-pending: #6f6f6f;
  --state-offline: #5e5e5e;
  --card-glass: color-mix(in srgb, #1e2230 58%, transparent);
  --backdrop-panel: blur(18px) saturate(160%) brightness(1.08);
  --shadow-mini: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-popover: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
  --brand: #ffffff;
  --brand-display: #ffffff;
  --brand-soft: #333333;
  --mark: #ffffff;
  color-scheme: dark;
}

/* ---- shell primitives ---- */
.lb-canvas {
  background-color: var(--canvas-base);
  background-image: radial-gradient(circle, var(--dot-color-base) var(--dot-size), transparent calc(var(--dot-size) + 0.5px));
  background-size: var(--dot-spacing) var(--dot-spacing);
}
.lb-glass { background: var(--card-glass); backdrop-filter: var(--backdrop-panel); -webkit-backdrop-filter: var(--backdrop-panel); }
.lb-figure { font-family: var(--font-figure); font-weight: var(--figure-weight); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.lb-num { font-variant-numeric: tabular-nums; }
.lb-label { font-size: 12px; font-weight: 500; color: var(--muted-foreground); } /* sentence case, never uppercase */
.lb-corners { position: relative; }
/* Outward pages only (sites, emails, landing): Manrope display. */
.lb-site { --font-display: Manrope, var(--font-sans); }
.lb-site h1, .lb-site h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.lb-site h1 .accent, .lb-site h2 .accent { color: var(--brand-display); }