/* leadflow — the route-band contact form. Every rule is scoped under .lf-root; the
   tokens (--lf-*) come from the site theme blocks at the end of this file. Ported from
   the approved preview (2026-10-12): Claude Design "Contact Form" in the Industry system,
   with the sapio.ro, vladtudor.com and thetechcall.com adaptations. */

/* ── Root, page ────────────────────────────────────────────────────────── */
.lf-root {
  --lf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lf-font-heading: var(--lf-font);
  --lf-heading-weight: 600;
  --lf-radius-tile: 0; --lf-radius-frame: 0; --lf-radius-btn: 0; --lf-radius-input: 0;
  position: relative; width: 100%; display: flex; flex-direction: column;
  background: var(--lf-bg); color: var(--lf-text);
  font-family: var(--lf-font); font-size: 15px; line-height: 1.55; font-weight: 400;
  text-align: left; -webkit-text-size-adjust: 100%;
  /* The step-change scroll aims for where the heading settles: browser scroll anchoring must not shift it again. */
  overflow-anchor: none;
}
.lf-root *, .lf-root *::before, .lf-root *::after { box-sizing: border-box; }
.lf-root ::selection { background: color-mix(in srgb, var(--lf-accent) 30%, transparent); }
.lf-root a { color: var(--lf-a700); text-underline-offset: 2px; }
.lf-root a:hover { color: var(--lf-a800); }
.lf-root :focus { outline: none; }
.lf-root :focus-visible { outline: 2px solid var(--lf-accent); outline-offset: 2px; }

.lf-page { width: 100%; max-width: 860px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px) 28px; display: flex; flex-direction: column; gap: 20px; flex: 1; }
.lf-root[data-lf-layout="mobile"] .lf-page { padding: 24px 16px 20px; gap: 16px; }
.lf-root .lf-page--flush { padding-left: 0 !important; padding-right: 0 !important; }

.lf-intro { display: flex; flex-direction: column; gap: 6px; }
.lf-root[data-lf-layout="mobile"] .lf-intro { max-width: 600px; }
.lf-root .lf-h1 { margin: 0; font-family: var(--lf-font-heading); font-weight: var(--lf-heading-weight); font-size: clamp(40px, 5vw, 56px); line-height: 1; letter-spacing: -0.015em; color: var(--lf-text); text-transform: none; }
.lf-root[data-lf-layout="mobile"] .lf-h1 { font-size: 34px; }
.lf-root .lf-sub { margin: 0; font-size: 15px; text-wrap: pretty; }
.lf-root .lf-muted { color: color-mix(in srgb, var(--lf-text) 55%, transparent); }

.lf-cols { display: flex; flex-direction: column; gap: 20px; }
.lf-root[data-lf-layout="mobile"] .lf-cols { gap: 16px; }

/* ── Frames (blueprint objects) and corner marks ───────────────────────── */
.lf-frame { position: relative; border: 1px solid var(--lf-line); border-radius: var(--lf-radius-frame); background: var(--lf-bg); }
.lf-corner { display: none; position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--lf-text) 55%, transparent); pointer-events: none; }
.lf-corner::before, .lf-corner::after { content: ""; position: absolute; background: currentColor; }
.lf-corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.lf-corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.lf-corner--tl { top: -6px; left: -6px; } .lf-corner--tr { top: -6px; right: -6px; }
.lf-corner--bl { bottom: -6px; left: -6px; } .lf-corner--br { bottom: -6px; right: -6px; }
.lf-root[data-lf-site="vladtudor"] .lf-corner { display: block; }

/* ── The route band (fixed height: 132px, 128px on phones) ─────────────── */
.lf-mapsec { padding: 14px 18px; }
.lf-root[data-lf-layout="mobile"] .lf-mapsec { padding: 10px 12px; }
.lf-grid { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: linear-gradient(var(--lf-a200) 1px, transparent 1px), linear-gradient(90deg, var(--lf-a200) 1px, transparent 1px);
  background-size: 20px 20px; background-position: -1px -1px; transition: opacity 1.2s ease 0.3s; }
.lf-mapsec__in { position: relative; display: flex; flex-direction: column; gap: 10px; }
.lf-mapbox { overflow: visible; }
.lf-band { display: block; overflow: visible; }

/* ── The question panel ────────────────────────────────────────────────── */
.lf-panel { padding: 28px; display: flex; flex-direction: column; }
.lf-root[data-lf-layout="mobile"] .lf-panel { padding: 20px 16px; }
.lf-panel__in { display: flex; flex-direction: column; gap: 20px; }
.lf-qhead { display: flex; flex-direction: column; gap: 6px; }
.lf-root .lf-q { margin: 0; font-family: var(--lf-font-heading); font-weight: var(--lf-heading-weight); font-size: 34px; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; color: var(--lf-text); text-transform: none; }
.lf-root .lf-q:focus, .lf-root .lf-q:focus-visible { outline: none; }
.lf-root[data-lf-layout="mobile"] .lf-q { font-size: 26px; }
.lf-root .lf-help { margin: 0; text-wrap: pretty; }

.lf-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.lf-opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lf-root[data-lf-layout="mobile"] .lf-opts { grid-template-columns: 1fr; }
.lf-root .lf-opt {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; text-align: left;
  margin: 0; padding: 14px 16px; min-height: 56px; width: 100%; font: inherit; color: var(--lf-text); cursor: pointer;
  border: 1px solid var(--lf-line); background: transparent; border-radius: var(--lf-radius-tile); box-shadow: none;
  -webkit-appearance: none; appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  text-transform: none; letter-spacing: normal;
  transition: border-color 0.2s, background 0.2s, transform 0.25s cubic-bezier(.2,.7,.2,1);
}
/* The hover lift moves the tile 3px up; this strip keeps the pointer inside it, so a pointer near the bottom edge never flickers. */
.lf-root .lf-opt { position: relative; }
.lf-root .lf-opt::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -5px; height: 5px; }
.lf-root .lf-opt.is-sel { border-color: var(--lf-accent); background: var(--lf-a100); }
@media (hover: hover) { .lf-root .lf-opt:hover { border-color: var(--lf-accent); transform: translateY(-3px); } }
.lf-root .lf-opt:active { transform: translateY(0) scale(0.98); }
.lf-opt__n { font-family: var(--lf-font-heading); font-size: 13px; color: var(--lf-a700); font-variant-numeric: tabular-nums; }
.lf-opt__t { font-family: var(--lf-font-heading); font-weight: 600; font-size: 19px; line-height: 1.15; }
.lf-opt__d { font-size: 13px; line-height: 1.35; color: color-mix(in srgb, var(--lf-text) 55%, transparent); }

/* ── Fields: a transparent input over a mirror that draws the typed characters ── */
.lf-field { display: flex; flex-direction: column; gap: 6px; }
.lf-root .lf-label { font-size: 12px; line-height: 1.4; color: color-mix(in srgb, var(--lf-text) 55%, transparent); text-transform: none; letter-spacing: normal; font-weight: 400; }
.lf-bigwrap { position: relative; }
.lf-mirror, .lf-root .lf-input {
  padding: 8px 40px 10px 0; font-family: var(--lf-font-heading); font-weight: 600; font-size: 26px;
  line-height: 1.25; font-kerning: none; letter-spacing: normal;
}
.lf-root[data-lf-layout="mobile"] .lf-mirror, .lf-root[data-lf-layout="mobile"] .lf-input { padding: 10px 40px 12px 0; font-size: clamp(24px, 6vw, 32px); }
.lf-mirror { position: absolute; inset: 0; white-space: pre; overflow: hidden; pointer-events: none; color: var(--lf-text); }
.lf-ph { color: var(--lf-n400); font-weight: 400; }
.lf-ch { display: inline-block; white-space: pre; background-image: linear-gradient(var(--lf-accent), var(--lf-accent)); background-repeat: no-repeat;
  background-position: left bottom; background-size: 100% 2px; animation: lf-rise 0.34s cubic-bezier(.2,.7,.2,1) both, lf-ul 0.24s ease-out 0.05s both; }
.lf-root .lf-input {
  display: block; width: 100%; margin: 0; color: transparent; caret-color: var(--lf-accent); background: transparent;
  border: 0; border-bottom: 1px solid var(--lf-line); border-radius: 0; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none;
  height: auto; min-height: 0;
}
.lf-root .lf-input:focus { border-bottom-color: var(--lf-a400); }
.lf-root .lf-input:focus-visible { outline: none; }
.lf-root .lf-input::selection { background: color-mix(in srgb, var(--lf-accent) 30%, transparent); }
.lf-root .lf-input::placeholder { color: var(--lf-n400); font-weight: 400; opacity: 1; }
/* Autofill: the browser's value is not in the mirror, so the input shows it itself.
   The animations are only a signal (animationstart) that flips the field to plain mode. */
.lf-root .is-autofilled .lf-input { color: var(--lf-text); }
.lf-root .lf-input:-webkit-autofill, .lf-root .lf-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lf-text); caret-color: var(--lf-accent);
  transition: background-color 600000s 0s, color 600000s 0s;
  animation-name: lf-autofill-start; animation-duration: 0.001s;
}
.lf-root .lf-input:autofill { animation-name: lf-autofill-start; animation-duration: 0.001s; }
.lf-root .lf-input:not(:-webkit-autofill) { animation-name: lf-autofill-end; animation-duration: 0.001s; }
.lf-okmark { position: absolute; right: 4px; top: 50%; margin-top: -12px; color: var(--lf-accent); }
.lf-okmark svg { display: block; }
.lf-draw { stroke-dasharray: 1; animation: lf-draw 0.4s ease-out both; }
.lf-draw--late { animation-duration: 0.3s; animation-delay: 0.3s; }
.lf-root .lf-fieldnote { font-size: 12px; color: color-mix(in srgb, var(--lf-text) 55%, transparent); }
.lf-root .lf-area {
  display: block; width: 100%; margin: 0; font: inherit; font-size: 16px; line-height: 1.5; padding: 12px 14px; min-height: 140px;
  color: var(--lf-text); caret-color: var(--lf-accent); background: transparent; border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius-input); resize: vertical; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.lf-root .lf-area::placeholder { color: var(--lf-n500); opacity: 1; }
.lf-root .lf-area:hover { border-color: color-mix(in srgb, var(--lf-text) 45%, transparent); }
.lf-root .lf-area:focus, .lf-root .lf-area:focus-visible { border-color: var(--lf-accent); outline: 2px solid var(--lf-accent); outline-offset: 0; }
.lf-contact { display: flex; flex-direction: column; gap: 18px; }
.lf-root .lf-notice { margin: 0; font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--lf-text) 55%, transparent); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.lf-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.lf-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.lf-root .lf-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  min-height: 44px; padding: 6px 18px; cursor: pointer; text-decoration: none; text-transform: none; letter-spacing: normal;
  font-family: var(--lf-font-heading); font-weight: var(--lf-heading-weight); font-size: 14px; line-height: 1.2;
  color: var(--lf-text); background: transparent; border: 1px solid var(--lf-line); border-radius: var(--lf-radius-btn);
  box-shadow: none; -webkit-appearance: none; appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.lf-root .lf-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lf-root .lf-btn--primary { background: var(--lf-accent); color: var(--lf-bg); border-color: var(--lf-accent); padding-inline: 22px; }
.lf-root .lf-btn--primary:not(:disabled):hover { background: var(--lf-a600); border-color: var(--lf-a600); }
.lf-root .lf-btn--primary:not(:disabled):active { background: var(--lf-a700); }
.lf-root .lf-btn--secondary:not(:disabled):hover { background: color-mix(in srgb, var(--lf-text) 7%, transparent); }
.lf-root .lf-btn--secondary:not(:disabled):active { background: color-mix(in srgb, var(--lf-text) 14%, transparent); }
.lf-root .lf-btn--tall { min-height: 48px; padding-inline: 16px; }
.lf-root .lf-btn--grow { width: 100%; }
.lf-root .lf-btn--sm { min-height: 36px; padding-inline: 14px; }
.lf-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lf-spin 0.8s linear infinite; }

/* ── Errors, done ──────────────────────────────────────────────────────── */
.lf-alert { border: 1px solid color-mix(in srgb, #d64545 60%, var(--lf-line)); background: color-mix(in srgb, #d64545 8%, transparent);
  border-radius: var(--lf-radius-tile); padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.lf-root .lf-alert p { margin: 0 0 8px; }
.lf-alert__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lf-root .lf-summary { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.lf-summary__row { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-bottom: 1px solid var(--lf-line); min-width: 0; }
.lf-root .lf-summary dt { font-size: 12px; color: color-mix(in srgb, var(--lf-text) 55%, transparent); }
.lf-root .lf-summary dd { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.lf-root .lf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lf-root .lf-table td { padding: 6.8px; border-bottom: 1px solid color-mix(in srgb, var(--lf-text) 8%, transparent); overflow-wrap: anywhere; vertical-align: top; }
.lf-root .lf-table td:first-child { width: 38%; font-size: 13px; }

/* ── Hidden helpers ────────────────────────────────────────────────────── */
.lf-sr, .lf-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }

/* ── Motion ────────────────────────────────────────────────────────────── */
@keyframes lf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lf-fade { from { opacity: 0; } }
@keyframes lf-fadeout { to { opacity: 0; } }
@keyframes lf-ring { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
@keyframes lf-rise { from { opacity: 0; transform: translateY(45%) scale(0.8); } }
@keyframes lf-ul { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
@keyframes lf-spin { to { transform: rotate(360deg); } }
@keyframes lf-autofill-start { from { opacity: 1; } to { opacity: 1; } }
@keyframes lf-autofill-end { from { opacity: 1; } to { opacity: 1; } }

/* Reduced motion: nothing draws, rises or lifts. Animations end at once (so the autofill
   signal still fires), transitions are off. */
@media (prefers-reduced-motion: reduce) {
  .lf-root *, .lf-root *::before, .lf-root *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .lf-root .lf-opt:hover { transform: none !important; }
}
.lf-root[data-lf-rm] *, .lf-root[data-lf-rm] *::before, .lf-root[data-lf-rm] *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
.lf-root[data-lf-rm] .lf-opt:hover { transform: none !important; }

/* ── Site shapes and type ──────────────────────────────────────────────── */
.lf-root[data-lf-site="sapio"] {
  --lf-font: var(--font-geist-sans, "Geist"), -apple-system, "Segoe UI", sans-serif; --lf-font-heading: var(--lf-font);
  --lf-radius-tile: 12px; --lf-radius-frame: 16px; --lf-radius-btn: 999px; --lf-radius-input: 12px;
}
.lf-root[data-lf-site="techcall"] {
  --lf-font: var(--font-geist-sans, "Geist"), -apple-system, "Segoe UI", sans-serif; --lf-font-heading: var(--lf-font);
  --lf-radius-tile: 10px; --lf-radius-frame: 14px; --lf-radius-btn: 8px; --lf-radius-input: 8px;
}
.lf-root[data-lf-site="vladtudor"] {
  --lf-font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --lf-font-heading: "Barlow Condensed", "Arial Narrow", sans-serif;
}
.lf-root[data-lf-site="vladtudor"] .lf-btn--primary { border-color: var(--lf-accent); }

/* ── Site themes (generated from the approved preview's theme.css) ─────────
   Each site follows its own switch when `theme` is not set: sapio.ro and thetechcall.com
   go dark under an ancestor .dark or [data-theme="dark"]; vladtudor.com is dark unless an
   ancestor has [data-theme="light"]. theme="light" | "dark" forces one; "auto" follows the OS. */
.lf-root[data-lf-site="sapio"] {
  --lf-bg: #ffffff; --lf-surface: #f4f4f5; --lf-text: #0f0f0f; --lf-accent: #006beb; --lf-line: rgba(0, 0, 0, 0.1);
  --lf-n100: #fafafa; --lf-n200: #f4f4f5; --lf-n300: #e4e4e7; --lf-n400: #c4c4c8; --lf-n500: #a1a1aa; --lf-n600: #85858e; --lf-n700: #71717a; --lf-n800: #3f3f46; --lf-n900: #18181b;
  --lf-a100: #eef5ff; --lf-a200: #dceafd; --lf-a300: #b3d1fb; --lf-a400: #7fb0f5; --lf-a500: #3d8ef0; --lf-a600: #0060d4; --lf-a700: #0053b8; --lf-a800: #003e8a; --lf-a900: #002a5e;
  color-scheme: light;
}
.lf-root[data-lf-site="sapio"][data-lf-theme="dark"],
.dark .lf-root[data-lf-site="sapio"]:not([data-lf-theme]),
[data-theme="dark"] .lf-root[data-lf-site="sapio"]:not([data-lf-theme]) {
  --lf-bg: #0a0a0a; --lf-surface: #111111; --lf-text: #f5f5f5; --lf-accent: #5ba3f5; --lf-line: rgba(255, 255, 255, 0.12);
  --lf-n100: #141414; --lf-n200: #1a1a1a; --lf-n300: #262626; --lf-n400: #444444; --lf-n500: #666666; --lf-n600: #7a7a7a; --lf-n700: #9a9a9a; --lf-n800: #c8c8c8; --lf-n900: #ededed;
  --lf-a100: #0d1a2b; --lf-a200: #11233b; --lf-a300: #1f4c82; --lf-a400: #3577c4; --lf-a500: #4a8fe0; --lf-a600: #7ab6f7; --lf-a700: #93c3f8; --lf-a800: #d2e5fc; --lf-a900: #eef5ff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .lf-root[data-lf-site="sapio"][data-lf-theme="auto"] {
    --lf-bg: #0a0a0a; --lf-surface: #111111; --lf-text: #f5f5f5; --lf-accent: #5ba3f5; --lf-line: rgba(255, 255, 255, 0.12);
    --lf-n100: #141414; --lf-n200: #1a1a1a; --lf-n300: #262626; --lf-n400: #444444; --lf-n500: #666666; --lf-n600: #7a7a7a; --lf-n700: #9a9a9a; --lf-n800: #c8c8c8; --lf-n900: #ededed;
    --lf-a100: #0d1a2b; --lf-a200: #11233b; --lf-a300: #1f4c82; --lf-a400: #3577c4; --lf-a500: #4a8fe0; --lf-a600: #7ab6f7; --lf-a700: #93c3f8; --lf-a800: #d2e5fc; --lf-a900: #eef5ff;
    color-scheme: dark;
  }
}
.lf-root[data-lf-site="techcall"] {
  --lf-bg: #ffffff; --lf-surface: #f7f8fa; --lf-text: #0f1115; --lf-accent: #007ed8; --lf-line: #e4e7ec;
  --lf-n100: #f7f8fa; --lf-n200: #eef0f3; --lf-n300: #e4e7ec; --lf-n400: #c5ccd5; --lf-n500: #9aa1ab; --lf-n600: #7b8290; --lf-n700: #6b7280; --lf-n800: #2a2f39; --lf-n900: #0f1115;
  --lf-a100: #eef7fd; --lf-a200: #dceef9; --lf-a300: #9fd0f2; --lf-a400: #5cb8ee; --lf-a500: #1a8fe3; --lf-a600: #0a6dba; --lf-a700: #0a5c99; --lf-a800: #083f69; --lf-a900: #052a46;
  color-scheme: light;
}
.lf-root[data-lf-site="techcall"][data-lf-theme="dark"],
.dark .lf-root[data-lf-site="techcall"]:not([data-lf-theme]),
[data-theme="dark"] .lf-root[data-lf-site="techcall"]:not([data-lf-theme]) {
  --lf-bg: #0b1118; --lf-surface: #111a24; --lf-text: #ffffff; --lf-accent: #5cb8ee; --lf-line: rgba(255, 255, 255, 0.14);
  --lf-n100: #111a24; --lf-n200: #16212d; --lf-n300: #1f2b38; --lf-n400: #3a4756; --lf-n500: #5b6979; --lf-n600: #73808e; --lf-n700: #9aa5b1; --lf-n800: #c9d0d8; --lf-n900: #f0f3f6;
  --lf-a100: #0f2333; --lf-a200: #12293b; --lf-a300: #1c4766; --lf-a400: #2a6f9e; --lf-a500: #3b95d0; --lf-a600: #86ccf2; --lf-a700: #93d2f4; --lf-a800: #d2ecfb; --lf-a900: #eef7fd;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .lf-root[data-lf-site="techcall"][data-lf-theme="auto"] {
    --lf-bg: #0b1118; --lf-surface: #111a24; --lf-text: #ffffff; --lf-accent: #5cb8ee; --lf-line: rgba(255, 255, 255, 0.14);
    --lf-n100: #111a24; --lf-n200: #16212d; --lf-n300: #1f2b38; --lf-n400: #3a4756; --lf-n500: #5b6979; --lf-n600: #73808e; --lf-n700: #9aa5b1; --lf-n800: #c9d0d8; --lf-n900: #f0f3f6;
    --lf-a100: #0f2333; --lf-a200: #12293b; --lf-a300: #1c4766; --lf-a400: #2a6f9e; --lf-a500: #3b95d0; --lf-a600: #86ccf2; --lf-a700: #93d2f4; --lf-a800: #d2ecfb; --lf-a900: #eef7fd;
    color-scheme: dark;
  }
}
.lf-root[data-lf-site="vladtudor"] {
  --lf-bg: #0b0d10; --lf-surface: #11141a; --lf-text: #ececec; --lf-accent: #4d9fff; --lf-line: rgba(255, 255, 255, 0.14);
  --lf-n100: #14181f; --lf-n200: #181c24; --lf-n300: #222731; --lf-n400: #3a404b; --lf-n500: #5c636f; --lf-n600: #777e8a; --lf-n700: #9ea4ad; --lf-n800: #cfd2d6; --lf-n900: #ececec;
  --lf-a100: #0f1a2a; --lf-a200: #132036; --lf-a300: #1d3d6b; --lf-a400: #2c5fa3; --lf-a500: #3f86e0; --lf-a600: #74b4ff; --lf-a700: #8cc0ff; --lf-a800: #cfe3ff; --lf-a900: #eaf3ff;
  color-scheme: dark;
}
.lf-root[data-lf-site="vladtudor"][data-lf-theme="light"],
[data-theme="light"] .lf-root[data-lf-site="vladtudor"]:not([data-lf-theme]) {
  --lf-bg: #f5f3ee; --lf-surface: #ece9e0; --lf-text: #15171b; --lf-accent: #1a5cd6; --lf-line: rgba(11, 13, 16, 0.16);
  --lf-n100: #f7f5f1; --lf-n200: #ece9e0; --lf-n300: #dcd8cd; --lf-n400: #bdb8ac; --lf-n500: #9a958a; --lf-n600: #7c776d; --lf-n700: #5e5a52; --lf-n800: #3d3a35; --lf-n900: #22201d;
  --lf-a100: #e9f0fc; --lf-a200: #d6e2f7; --lf-a300: #a9c3f0; --lf-a400: #7aa1e6; --lf-a500: #4a7ede; --lf-a600: #1650bd; --lf-a700: #12449f; --lf-a800: #0c3070; --lf-a900: #071d45;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  .lf-root[data-lf-site="vladtudor"][data-lf-theme="auto"] {
    --lf-bg: #f5f3ee; --lf-surface: #ece9e0; --lf-text: #15171b; --lf-accent: #1a5cd6; --lf-line: rgba(11, 13, 16, 0.16);
    --lf-n100: #f7f5f1; --lf-n200: #ece9e0; --lf-n300: #dcd8cd; --lf-n400: #bdb8ac; --lf-n500: #9a958a; --lf-n600: #7c776d; --lf-n700: #5e5a52; --lf-n800: #3d3a35; --lf-n900: #22201d;
    --lf-a100: #e9f0fc; --lf-a200: #d6e2f7; --lf-a300: #a9c3f0; --lf-a400: #7aa1e6; --lf-a500: #4a7ede; --lf-a600: #1650bd; --lf-a700: #12449f; --lf-a800: #0c3070; --lf-a900: #071d45;
    color-scheme: light;
  }
}