/* EtongaERP shared design tokens & primitives */
:root{
  --bg:#f5f7fb;
  --bg-2:#e5ebf3;
  --surface:#ffffff;
  --surface-2:#f8fafd;
  --ink:#0f1530;
  --ink-2:#3a4566;
  --ink-3:#7a8295;
  --line:#d6dde8;
  --line-2:#ebeff5;
  --primary:#1d6fdc;
  --primary-ink:#1e2a5e;
  --primary-soft:#d4e3f7;
  --accent:#f8c91e;
  --accent-soft:#fef3cc;
  --gold:#e63946;
  --gold-soft:#fadcde;
  --danger:#a3392f;
  --info:#3a5a7a;
  --shadow: 0 1px 0 rgba(15,21,48,.04), 0 1px 2px rgba(15,21,48,.05);
  --shadow-lg: 0 1px 2px rgba(15,21,48,.04), 0 12px 30px rgba(15,21,48,.08);
  --radius:10px;
  --radius-lg:16px;
}
:root[data-theme="terre"]{
  --bg:#f6f1e9;
  --bg-2:#efe7d7;
  --surface-2:#fbf8f2;
  --ink:#1c1814;
  --ink-2:#4a433b;
  --ink-3:#8a8275;
  --line:#e4dccb;
  --line-2:#efe9db;
  --primary:#B8552E;
  --primary-ink:#7a3818;
  --primary-soft:#f3dccd;
  --accent:#2D5F4A;
  --accent-soft:#dceadf;
  --gold:#b88a3a;
  --gold-soft:#f1e3c4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",serif;font-weight:600;letter-spacing:-0.01em;margin:0;color:var(--ink)}
h1{font-size:28px;line-height:1.15;letter-spacing:-0.02em}
h2{font-size:22px}
h3{font-size:17px;font-weight:600}
h4{font-size:14px;font-weight:600}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--primary-soft);color:var(--primary-ink)}

.ic{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:14px;height:14px}
.ic-lg{width:22px;height:22px}

.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;border:1px solid var(--line);font-weight:600;font-size:13px;background:var(--surface);color:var(--ink);transition:all .15s}
.btn:hover{background:var(--surface-2);border-color:#d6cdb8}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:#a04823;border-color:#a04823}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--bg-2);color:var(--ink)}
.btn-sm{padding:5px 9px;font-size:12px}
.btn-icon{padding:7px;width:32px;justify-content:center}
.btn-lg{padding:12px 20px;font-size:14px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.card-pad{padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.card-head h3{font-size:15px}
.card-foot{padding:12px 20px;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;color:var(--ink-3);font-size:12px}

.stat{padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.stat-label{font-size:12px;color:var(--ink-3);font-weight:500;text-transform:uppercase;letter-spacing:0.06em;display:flex;align-items:center;gap:6px}
.stat-label .ic{width:13px;height:13px}
.stat-value{font-family:"Bricolage Grotesque",serif;font-size:30px;font-weight:600;letter-spacing:-0.02em;margin-top:6px;color:var(--ink)}
.stat-delta{font-size:12px;color:var(--accent);font-weight:600;margin-top:4px;display:flex;align-items:center;gap:4px}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-3);padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
table.tbl td{padding:11px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr:hover td{background:var(--surface-2)}
.person{display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:11px;flex:none}
.avatar.big{width:42px;height:42px;font-size:14px}
.person .name{font-weight:600;color:var(--ink);line-height:1.1}
.person .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}

.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;background:var(--bg-2);color:var(--ink-2)}
.chip-green{background:var(--accent-soft);color:#1f4634}
.chip-orange{background:var(--primary-soft);color:var(--primary-ink)}
.chip-gold{background:var(--gold-soft);color:#7a5a1f}
.chip-blue{background:#dee7f0;color:#2b4565}
.chip-red{background:#f3d6d2;color:#7a261d}
.chip-gray{background:#e8e1d2;color:#4a433b}
.chip-outline{background:transparent;border:1px solid var(--line);color:var(--ink-2)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}

.bar{height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden}
.bar > div{height:100%;background:var(--primary);border-radius:99px}

.switch{width:34px;height:20px;background:var(--bg-2);border-radius:99px;position:relative;cursor:pointer;transition:background .15s;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:left .15s}
.switch.on{background:var(--accent)}
.switch.on::after{left:16px}

.brand-mark{width:36px;height:36px;border-radius:9px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.18);overflow:hidden;position:relative}

.brand-mark svg{width:18px;height:18px;color:#fff;stroke-width:2;position:relative;z-index:1}
.brand-name{font-family:"Bricolage Grotesque",serif;font-weight:600;font-size:18px;letter-spacing:-0.01em}
.brand-sub{font-size:10px;color:#9b8f78;letter-spacing:0.18em;text-transform:uppercase;margin-top:2px}

.brand-mark img{width:100%;height:100%;object-fit:contain;padding:2px;display:block}