/* Bridgecall shared design system — one file, both themes.
   Flat color, no gradients, restrained accent, Tabler icons instead of emoji. */

:root{
  --ink:#16161a; --ink-soft:#3a3934;
  --paper:#ffffff; --paper-2:#faf9f5; --paper-3:#f1efe8;
  --line:#e8e6df; --line-strong:#cecbc2;
  --text:#16161a; --text-2:#5f5e58; --text-3:#8a8980;
  --accent:#16161a; --on-accent:#ffffff;
  --chip:#f1efe8; --chip-text:#5f5e58;
  --ok:#0f6e56; --ok-bg:#e1f5ee;
  --warn:#854f0b; --warn-bg:#faeeda;
  --err:#a32d2d; --err-bg:#fcebeb;
  --radius:10px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(22,22,26,.06);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
html[data-theme="dark"]{
  --ink:#f0eee8; --ink-soft:#cfcdc4;
  --paper:#15151a; --paper-2:#1b1b21; --paper-3:#222127;
  --line:#2b2a30; --line-strong:#3a3940;
  --text:#f0eee8; --text-2:#9a988f; --text-3:#6f6e67;
  --accent:#f0eee8; --on-accent:#15151a;
  --chip:#222127; --chip-text:#b8b6ad;
  --ok:#5dcaa5; --ok-bg:#0c2620;
  --warn:#ef9f27; --warn-bg:#2c2008;
  --err:#f09595; --err-bg:#2c1414;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper-2); color:var(--text);
  font-family:var(--font); -webkit-font-smoothing:antialiased;
  transition:background .15s,color .15s;
}
a{color:inherit}
h1,h2,h3{font-weight:500; letter-spacing:-0.3px; margin:0}
p{margin:0; line-height:1.6}

/* ── Nav ─────────────────────────────────────────────────────── */
.bc-nav{
  display:flex; align-items:center; gap:8px;
  padding:0 24px; height:62px;
  background:var(--paper); border-bottom:0.5px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.bc-brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text)}
.bc-brand .mark{
  width:28px; height:28px; border-radius:8px;
  background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
.bc-brand .name{font-size:15px; font-weight:500}
.bc-nav-links{display:flex; gap:4px; margin-left:28px}
.bc-nav-links a{
  font-size:13.5px; color:var(--text-2); text-decoration:none;
  padding:7px 12px; border-radius:8px; transition:background .12s,color .12s;
}
.bc-nav-links a:hover, .bc-nav-links a.active{background:var(--paper-3); color:var(--text)}
.bc-nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.bc-theme-btn{
  width:34px; height:34px; border-radius:9px; border:0.5px solid var(--line);
  background:var(--paper); color:var(--text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.bc-theme-btn:hover{color:var(--text); border-color:var(--line-strong)}
.bc-ham{display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--text)}

/* ── Buttons ─────────────────────────────────────────────────── */
.bc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:14px; font-weight:500; cursor:pointer;
  padding:11px 20px; border-radius:var(--radius); border:none;
  text-decoration:none; transition:opacity .12s, transform .08s, background .12s;
  white-space:nowrap;
}
.bc-btn:active{transform:scale(.98)}
.bc-btn-pri{background:var(--accent); color:var(--on-accent)}
.bc-btn-pri:hover{opacity:.88}
.bc-btn-ghost{background:transparent; color:var(--text); border:0.5px solid var(--line-strong)}
.bc-btn-ghost:hover{border-color:var(--text-3); background:var(--paper-3)}
.bc-btn-sm{padding:8px 14px; font-size:13px}
.bc-btn:disabled{opacity:.5; cursor:not-allowed}
.bc-btn-block{width:100%}

/* ── Forms ───────────────────────────────────────────────────── */
.bc-label{
  display:block; font-size:12px; font-weight:500; color:var(--text-2);
  margin-bottom:7px;
}
.bc-input, .bc-select{
  width:100%; font-family:inherit; font-size:15px; color:var(--text);
  background:var(--paper); border:1px solid var(--line-strong);
  border-radius:var(--radius); padding:12px 14px; outline:none;
  transition:border-color .12s;
}
.bc-input:focus, .bc-select:focus{border-color:var(--text)}
.bc-input::placeholder{color:var(--text-3)}
.bc-field{margin-bottom:16px}
.bc-hint{font-size:12px; color:var(--text-3); margin-top:6px; line-height:1.5}

/* ── Cards ───────────────────────────────────────────────────── */
.bc-card{
  background:var(--paper); border:0.5px solid var(--line);
  border-radius:var(--radius-lg); padding:24px;
}

/* ── Chips / badges ──────────────────────────────────────────── */
.bc-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:500; color:var(--chip-text); background:var(--chip);
  padding:5px 12px; border-radius:20px;
}
.bc-chip-ok{color:var(--ok); background:var(--ok-bg)}
.bc-chip-warn{color:var(--warn); background:var(--warn-bg)}
.bc-chip-err{color:var(--err); background:var(--err-bg)}

/* ── Toast ───────────────────────────────────────────────────── */
.bc-toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--paper);
  padding:11px 20px; border-radius:24px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .2s;
  max-width:90vw; text-align:center; z-index:9999;
}
html[data-theme="dark"] .bc-toast{background:var(--paper); color:var(--ink)}
.bc-toast.on{opacity:1}

/* ── Footer ──────────────────────────────────────────────────── */
.bc-footer{
  border-top:0.5px solid var(--line); padding:28px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:13px; color:var(--text-3);
}
.bc-footer a{color:var(--text-2); text-decoration:none}
.bc-footer a:hover{color:var(--text)}
.bc-footer-links{display:flex; gap:18px; flex-wrap:wrap}

/* ── Mobile nav ──────────────────────────────────────────────── */
.bc-mob-menu{
  display:none; position:fixed; inset:0; top:62px; z-index:60;
  background:var(--paper); flex-direction:column; padding:14px; gap:2px;
  border-top:0.5px solid var(--line);
}
.bc-mob-menu.open{display:flex}
.bc-mob-link{
  font-size:15px; color:var(--text-2); text-decoration:none;
  padding:13px 14px; border-radius:10px;
}
.bc-mob-link:hover, .bc-mob-link.active{background:var(--paper-3); color:var(--text)}
.bc-mob-div{height:0.5px; background:var(--line); margin:8px 4px}

@media(max-width:680px){
  .bc-nav-links{display:none}
  .bc-ham{display:flex}
}