/* =============================================================================
   ORBNEX Connect — Public Design System · VERSION 1 (FROZEN 2026-07-17)

   Single source of truth for every public page: tokens, brand, buttons, form
   controls, focus, header/footer shells. Link this BEFORE any page-specific
   <style> so pages override layout only, never the system.

   Palette: warm off-white ground, warm ink; cool-neutral cards; muted aqua for
   interaction; ORBNEX orange reserved for primary CTAs. Thin borders, restrained
   shadows, generous whitespace.

   FROZEN — do not restyle for taste. See docs/public-design-system.md.
   Change tokens/primitives here ONLY for: accessibility fixes, broken layouts,
   factual/responsive/performance fixes. New public pages must LINK this file and
   reuse .site-header / .brand / .btn* / .field / inputs / .card / .eyebrow —
   never redefine the palette inline.
   ============================================================================= */

:root{
  /* ground + surfaces */
  --bg:#fbf8f4;          /* warm off-white page */
  --surface:#f2f4f6;     /* cool-neutral secondary surface */
  --card:#ffffff;        /* clean neutral card */

  /* text */
  --ink:#221a15;         /* warm charcoal */
  --muted:#6b5a4e;       /* warm gray (AA on bg + card) */
  --muted-2:#8a7a6e;

  /* accent — muted aqua, for interaction + accent text (AA on bg/card) */
  --accent:#0b6e77;
  --accent-strong:#0e7c86;
  --accent-soft:rgba(11,110,119,.10);

  /* primary CTA — ORBNEX orange, fill only (dark text for AA) */
  --cta:#f97316;
  --cta-ink:#26120a;
  --cta-hover:#ea580c;

  /* lines + semantic */
  --line:#e8e5e0;        /* thin warm-neutral hairline */
  --line-2:#eef0f2;      /* cool hairline inside cards */
  --danger:#b42318;
  --danger-soft:rgba(180,35,24,.08);
  --good:#15803d;
  --good-soft:rgba(21,128,61,.10);
  --warn:#9a5b00;

  --radius:10px;
  --radius-sm:8px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(34,26,21,.05);
  --shadow:0 1px 2px rgba(34,26,21,.04), 0 12px 32px rgba(34,26,21,.06);
  --ring:0 0 0 3px rgba(11,110,119,.35);
  --maxw:1140px;

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600}

/* focus — aqua, visible on every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:6px;
}

.skip-link{
  position:absolute;left:16px;top:-100px;z-index:100;
  background:var(--cta);color:var(--cta-ink);font-weight:700;font-family:var(--sans);
  padding:12px 18px;border-radius:0 0 8px 8px;transition:top .15s ease;
}
.skip-link:focus{top:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* -------------------------------------------------------------------------
   Brand — enlarged mark + wordmark for stronger ORBNEX presence.
   Markup: <a class="brand"><span class="mark"></span>
             <span class="name"><b>Orbnex Connect</b><small>…</small></span></a>
   ------------------------------------------------------------------------- */
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);font-family:var(--sans)}
.brand .mark{
  width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cta),#9a3412);
  box-shadow:0 0 0 1px rgba(249,115,22,.28), 0 8px 20px rgba(249,115,22,.22);
}
.brand .mark::before{content:"";width:13px;height:13px;border-radius:50%;border:3px solid #fff7ed}
.brand .name{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand .name b{font-weight:800;font-size:18.5px;letter-spacing:-.015em}
.brand .name small{
  margin-top:3px;font-family:var(--mono);font-weight:500;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}

/* -------------------------------------------------------------------------
   Header / footer shells
   ------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(251,248,244,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px}
.site-footer{border-top:1px solid var(--line);padding:28px 0 42px;margin-top:24px}
.site-footer .bar{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between}
.site-footer a{color:var(--muted);font-size:13.5px;min-height:24px;display:inline-flex;align-items:center}
.site-footer a:hover{color:var(--accent)}
.site-footer .mono{font-family:var(--mono);font-size:12px;color:var(--muted-2)}

/* -------------------------------------------------------------------------
   Buttons — supports both `.btn-primary` and `.btn.primary` conventions
   so existing markup across pages stays valid. Orange = primary only.
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  font-family:var(--sans);font-weight:600;font-size:15px;padding:12px 20px;
  border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.btn-primary,.btn.primary{background:var(--cta);color:var(--cta-ink);border-color:var(--cta);box-shadow:0 6px 16px rgba(249,115,22,.18)}
.btn-primary:hover,.btn.primary:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:#fff}
.btn-secondary,.btn-ghost,.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover,.btn-ghost:hover,.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn:disabled,.btn[disabled],.btn:disabled:hover{opacity:.6;cursor:not-allowed;box-shadow:none}
.btn-lg{min-height:52px;padding:14px 26px;font-size:15.5px}
.btn svg{width:16px;height:16px}

/* -------------------------------------------------------------------------
   Form controls
   ------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
input,select,textarea{
  width:100%;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:15px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--muted-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
textarea{resize:vertical;line-height:1.55}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:28px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}