/* ORBYNT landing pages — theme tokens, self-hosted fonts, base + control styles.
   Loaded after modernist.css, which it overrides for the dark inversion.
   Drop the .woff2 files into assets/fonts/ with the filenames below. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Archivo-Regular.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Archivo-Medium.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Archivo-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Archivo-Bold.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2"); }

:root {
  --grotesk: "Archivo", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg: #0B0F0E;
  --panel: #101614;
  --ink: #E9EEEC;
  --ink-2: #B3BFBB;
  --dim: #7E8B87;
  --rule: #1D2624;
  --rule-2: #2C3835;
  --accent: #2DD4A7;
  --accent-hi: #6FE6C4;
  --accent-ink: #06120E;
  --danger: #F2836B;
}

html[data-theme="light"] {
  --bg: #F4F5F4;
  --panel: #FFFFFF;
  --ink: #151B19;
  --ink-2: #414B48;
  --dim: #5F6B67;
  --rule: #DBDFDD;
  --rule-2: #C2C9C6;
  --accent: #0C8A69;
  --accent-hi: #096A51;
  --accent-ink: #FFFFFF;
  --danger: #A63A1E;
}

* { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--grotesk); font-size: 16px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-wrap: pretty;
}
h1, h2, h3, h4 { font-family: var(--grotesk); margin: 0; line-height: 1.06; letter-spacing: -0.02em; font-weight: 600; }
p { margin: 0; }
img { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* language: DE is the default and the JS-disabled state */
html:not([data-lang="en"]) [data-l="en"] { display: none !important; }
html[data-lang="en"] [data-l="de"] { display: none !important; }

/* small mono chrome buttons (language, theme) */
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule-2); color: var(--dim);
  padding: 6px 10px; cursor: pointer; line-height: 1;
}
.chip:hover { color: var(--ink); border-color: var(--ink-2); }
.chip[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* primary action — flush-left label, accent fill, no radius */
.act {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px;
  font-family: var(--grotesk); font-weight: 600; font-size: 15px; line-height: 1;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  padding: 17px 24px; cursor: pointer; text-align: left;
}
.act:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--accent-ink); }
.act:active { transform: translateY(1px); }
.act-ghost { background: none; color: var(--ink); border-color: var(--rule-2); }
.act-ghost:hover { background: none; color: var(--accent); border-color: var(--accent); }

/* form controls */
.in {
  width: 100%; background: transparent; color: var(--ink);
  font-family: var(--grotesk); font-size: 16px; line-height: 1.4;
  border: 0; border-bottom: 1px solid var(--rule-2); padding: 12px 0; outline: none;
}
.in:focus { border-bottom-color: var(--accent); }
.in::placeholder { color: var(--dim); }
select.in { padding-left: 0; }
select.in option { background: var(--panel); color: var(--ink); }
textarea.in { resize: vertical; min-height: 96px; }
.lab {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 6px;
}

/* form states, driven by data-state on the <form> — JS-free markup, JS-set attribute */
.st-idle { display: grid; gap: 28px; }
.st-ok, .st-err { display: none; }
form[data-state="sending"] .st-idle { opacity: 0.45; pointer-events: none; }
form[data-state="ok"] .st-idle, form[data-state="err"] .st-idle { display: none !important; }
form[data-state="ok"] .st-ok { display: block; }
form[data-state="err"] .st-err { display: block; }

code, .mono { font-family: var(--mono); }