@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Manrope:wght@400;500;600;700;800&family=Amiri:wght@400;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --sable:#1B1611;
  --sable-2:#241D16;
  --sable-3:#2E2419;
  --ivory:#F8F4EC;
  --stone:#EDE4D3;
  --stone-2:#E3D8C2;
  --brass:#AD8A54;
  --brass-light:#D8C6A1;
  --teal:#123B3C;
  --teal-light:#1E5C5D;
  --terracotta:#8C3F32;
  --ink:#2A231C;
  --ink-soft:#5A5044;
  --line: rgba(42,35,28,0.14);
  --line-dark: rgba(248,244,236,0.16);

  --ok:#3F6B4A;
  --ok-bg:#E7EFE7;
  --warn:#9C7A2E;
  --warn-bg:#F6EDD8;
  --bad:#8C3F32;
  --bad-bg:#F3E2DD;
  --info:#123B3C;
  --info-bg:#E1EAE9;

  --display: 'Fraunces', serif;
  --body: 'Manrope', sans-serif;
  --arabic: 'Amiri', serif;
  --mono: 'IBM Plex Mono', monospace;

  --sidebar-w: 248px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--ivory); color:var(--ink); font-family:var(--body); -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; width:100%; }
button{ font-family:var(--body); cursor:pointer; }
input,select,textarea{ font-family:var(--body); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }
@media (max-width:900px){ .wrap{ padding:0 22px; } }

.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--brass); display:inline-block; }

h1,h2,h3{ font-family:var(--display); font-weight:500; margin:0; color:var(--ink); letter-spacing:-0.01em; }

.btn{
  font-family:var(--body); font-weight:600; font-size:13.5px; letter-spacing:.02em;
  padding:13px 26px; border-radius:2px; cursor:pointer; border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:all .2s ease;
}
.btn-sm{ padding:9px 16px; font-size:12.5px; }
.btn-primary{ background:var(--brass); color:var(--sable); }
.btn-primary:hover{ background:var(--brass-light); }
.btn-outline-dark{ border-color:var(--sable); color:var(--sable); background:transparent; }
.btn-outline-dark:hover{ background:var(--sable); color:var(--ivory); }
.btn-outline-light{ border-color:rgba(248,244,236,.4); color:var(--ivory); background:transparent; }
.btn-outline-light:hover{ background:var(--ivory); color:var(--sable); border-color:var(--ivory); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }
.btn-danger-outline{ border-color:var(--bad); color:var(--bad); background:transparent; }
.btn-danger-outline:hover{ background:var(--bad); color:#fff; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.badge{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:20px; display:inline-block; }
.badge-ok{ background:var(--ok-bg); color:var(--ok); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-bad{ background:var(--bad-bg); color:var(--bad); }
.badge-info{ background:var(--info-bg); color:var(--info); }

/* ---------- demo utility bar (shown on every page in this prototype) ---------- */
.demo-bar{ background:var(--sable-2); color:rgba(248,244,236,.7); font-family:var(--mono); font-size:11px; letter-spacing:.04em; }
.demo-bar .wrap{ display:flex; align-items:center; gap:26px; padding:9px 40px; overflow-x:auto; white-space:nowrap; }
.demo-bar span{ color:rgba(248,244,236,.4); text-transform:uppercase; }
.demo-bar a{ color:rgba(248,244,236,.7); padding:2px 0; border-bottom:1px solid transparent; }
.demo-bar a.active{ color:var(--brass-light); border-color:var(--brass-light); }
.demo-bar a:hover{ color:#fff; }

.sadu{ width:100%; display:block; height:24px; }