/* ============================================================
   PORTAL SKIN , Dry Creek Outfitters ("Light & Bright" paper)
   Faithful to the portal concept Rustin saw first:
   bone paper, white-matted cards, ink text, brick spent sparingly,
   Fraunces headings, Archivo labels, Spline mono meta.
   Loaded AFTER portal bones (hub.css) so brand rules can override.
   ============================================================ */

:root{
  --font-display:'Fraunces',Georgia,serif;
  --font-head:'Archivo',sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',monospace;

  --bg0:#F4F0E7;            /* bone page (the mockup's screen bg) */
  --bg-side:#FFFFFF;        /* paper rail */
  --bg1:#FFFFFF;            /* white-matted card */
  --bg2:#F1ECE1;            /* raised / hover */
  --bg3:#E9E3D5;            /* highest */
  --line-1:rgba(33,30,25,.12);   /* the mockup hairline */
  --line-2:rgba(33,30,25,.24);

  --t1:#211E19;             /* ink */
  --t2:#56503F;             /* bark */
  --t3:#6E6452;             /* taupe */

  --acc:#A8392B;            /* brick, spent sparingly */
  --acc-2:#BF4131;
  --acc-deep:#7E2B20;
  --acc-ink:#FFF8F3;        /* text on brick */
  --acc-soft:rgba(168,57,43,.08);
  --acc-ring:rgba(168,57,43,.18);

  --ok:#3C5A40; --danger:#8F2F26; --danger-deep:#C9A29D;
  --lead:#6E6452; --contact:#3C5A40; --customer:var(--acc);

  --r-lg:12px; --r-md:10px; --r-sm:4px;    /* the mockup's crisp print radii */
  --shadow-1:0 1px 2px rgba(40,36,28,.05),0 14px 34px -20px rgba(40,36,28,.18);
  --shadow-2:0 36px 80px -38px rgba(40,36,28,.4);
  --card-sheen:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0));
  --login-texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720'%3E%3Cg fill='none' stroke='%23A8392B' stroke-opacity='.06'%3E%3Cpath d='M160 560c-90-60-110-190-40-270s190-90 260-30 90 60 150 20 130-30 150 40-30 170-120 200-170-40-230 0-80 80-170 40Z'/%3E%3Cpath d='M180 540c-70-50-90-160-30-230s160-80 220-25 80 50 130 15 110-25 128 35-25 145-100 170-145-35-195 0-73 65-153 35Z'/%3E%3Cpath d='M205 515c-55-40-70-130-22-185s130-65 178-20 65 40 105 12 90-20 104 28-20 118-81 138-118-28-158 0-61 52-126 27Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- brand rules (beyond tokens) ---- */
/* Fraunces serif display voice, title case like the mockup headings. */
.display{text-transform:none;letter-spacing:-.012em;line-height:1.04;font-weight:600}
.pf__name{text-transform:none;font-weight:600}
.stat__n,.sl__n,.pstage__n{font-weight:600}
.login__title{font-size:36px}
.viewhead__title{font-size:33px}

/* The lockup runs in its natural ink on paper, no treatment. */
.side__brand img{height:40px}
.login__logo{height:62px;filter:none}

/* Light-mode re-tints of bones rules that assume a dark shell. */
body{background:radial-gradient(90% 46% at 62% -12%,rgba(168,57,43,.03),transparent 70%),var(--bg0)}
::selection{background:rgba(168,57,43,.16);color:var(--t1)}
:focus-visible{outline-color:var(--acc)}

.btn-fire{background:linear-gradient(180deg,var(--acc-2) -30%,var(--acc) 60%,#8F2F26);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 20px -10px rgba(168,57,43,.5)}
.btn-ghost{border:1px solid var(--line-2);color:var(--t2);background:#fff}
.btn-ghost:hover{border-color:var(--acc);color:var(--t1);background:var(--acc-soft)}
.btn-danger{border-color:var(--danger-deep);color:var(--danger)}
.btn-danger:hover{background:rgba(143,47,38,.08);border-color:var(--danger)}

.login{background:radial-gradient(120% 90% at 50% -10%,#FBF9F2,#E9E3D5 75%)}
.login__card{background:#fff}
.login__error{color:var(--danger)}
.drawer__panel{background:#fff}
.modal__box{background:#fff;border-color:var(--line-1)}
.drawer__scrim,.modal__scrim{background:rgba(33,30,25,.42)}
.pf__x:hover,.modal__x:hover{background:rgba(33,30,25,.06)}

/* hovers: ink-tint instead of white-tint */
.navitem:hover{background:rgba(33,30,25,.045)}
.sl:hover{background:rgba(33,30,25,.035)}
.tbl tbody tr:hover{background:rgba(33,30,25,.03)}
.attn__row:hover{background:rgba(33,30,25,.03)}
.feed__it:hover{background:rgba(33,30,25,.03)}
.fieldrow{background:var(--bg0)}
.chip{background:#fff}
.pstage.is-active{border-color:rgba(168,57,43,.4);
  background:linear-gradient(180deg,rgba(168,57,43,.05),rgba(168,57,43,.015)),#fff}
.pstage.is-active::before{background:linear-gradient(90deg,var(--acc),rgba(168,57,43,.15))}
.pulse__track{background:rgba(33,30,25,.08)}

/* badges exactly per the portal mockup */
.badge-lead{background:rgba(110,100,82,.16);color:#4E4737;border:1px solid rgba(110,100,82,.28)}
.badge-contact{background:rgba(60,90,64,.16);color:var(--ok);border:1px solid rgba(60,90,64,.3)}
.badge-customer{background:rgba(168,57,43,.12);color:var(--acc);border:1px solid rgba(168,57,43,.28)}
.age--warm{color:var(--acc);border-color:rgba(168,57,43,.4);background:var(--acc-soft)}
.age--hot{color:var(--danger);border-color:rgba(143,47,38,.4);background:rgba(143,47,38,.09)}
.src--phone .src__dot{background:var(--acc)}

.side__avatar{background:linear-gradient(180deg,var(--acc-2),var(--acc));color:#fff;
  box-shadow:0 0 0 1px rgba(168,57,43,.3),0 4px 10px -4px rgba(40,36,28,.3)}
.pf__avatar{background:var(--bg0);border-color:rgba(168,57,43,.45);color:var(--acc)}
.tl li:first-child::before{background:var(--acc);border-color:var(--acc)}

.tog{background:var(--bg3);border-color:var(--line-1)}
.tog::after{background:#fff;box-shadow:0 1px 3px rgba(40,36,28,.35)}
.tog.on{background:linear-gradient(180deg,var(--acc-2),var(--acc));border-color:var(--acc)}
.tog.on::after{background:#fff}

.toast{background:#211E19;color:#F4F0E7;border-color:rgba(244,240,231,.15);border-left-color:var(--acc-2)}

::-webkit-scrollbar-thumb{background:#CFC6B3;border-color:var(--bg0)}
::-webkit-scrollbar-thumb:hover{background:#B4A98F}
.stat__ico{color:rgba(33,30,25,.22)}
button.stat:hover .stat__ico{color:var(--acc)}
.sends__tag{color:var(--acc);background:var(--acc-soft);border-color:rgba(168,57,43,.3)}
.link--danger{color:#B4756D}
.link--danger:hover{color:var(--danger)}