/* Vega Metals Trading — institutional commodities-trade blueprint
   Ink + bronze + parchment. Spectral (display) / Hanken Grotesk (body) / JetBrains Mono (data). */

:root{
  --ink:#0e1116;
  --ink-2:#161b22;
  --ink-3:#1d222c;
  --paper:#f5f2ec;
  --paper-2:#ece6d8;
  --paper-3:#e2d9c6;
  --bronze:#b08d57;
  --bronze-light:#cba876;
  --bronze-dark:#8a6d41;
  --text-onDark:#e9e5db;
  --muted-onDark:#a19c8f;
  --line-onDark:rgba(233,229,219,.14);
  --text-onLight:#1a1d22;
  --muted-onLight:#5c584d;
  --line-onLight:rgba(26,29,34,.14);
  --font-display:'Spectral', serif;
  --font-body:'Hanken Grotesk', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--text-onLight);font-family:var(--font-body);}
.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);}
h1,h2,h3,h4,.display{font-family:var(--font-display);}
::selection{background:var(--bronze);color:#fff;}

.bg-ink{background:var(--ink);}
.bg-ink-2{background:var(--ink-2);}
.bg-paper{background:var(--paper);}
.bg-paper-2{background:var(--paper-2);}
.text-bronze{color:var(--bronze);}
.text-onDark{color:var(--text-onDark);}
.text-mutedDark{color:var(--muted-onDark);}
.text-mutedLight{color:var(--muted-onLight);}
.border-onDark{border-color:var(--line-onDark);}
.border-onLight{border-color:var(--line-onLight);}

/* eyebrow tag */
.eyebrow{font-family:var(--font-mono);letter-spacing:.16em;font-size:.72rem;text-transform:uppercase;color:var(--bronze);}
.eyebrow::before{content:"";display:inline-block;width:22px;height:1px;background:var(--bronze);margin-right:10px;vertical-align:middle;}

/* ===== utility bar ===== */
.util-bar{background:var(--ink);color:var(--muted-onDark);font-family:var(--font-mono);font-size:.72rem;border-bottom:1px solid var(--line-onDark);}
.util-bar a:hover{color:var(--bronze-light);}
.lang-pill{border:1px solid var(--line-onDark);border-radius:999px;padding:.15rem .7rem;font-weight:600;letter-spacing:.04em;transition:border-color .2s,color .2s;}
.lang-pill:hover, .lang-pill.active{border-color:var(--bronze);color:var(--bronze-light);}

/* ===== nav ===== */
.main-nav{background:rgba(14,17,22,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-onDark);transition:background .25s;}
.nav-link{position:relative;font-size:.86rem;letter-spacing:.02em;color:var(--text-onDark);}
.nav-link::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:1px;background:var(--bronze);transition:width .25s ease;}
.nav-link:hover::after,.nav-link.active::after{width:100%;}
.nav-link.active{color:var(--bronze-light);}

.btn-cta{background:var(--bronze);color:#15130d;font-weight:700;letter-spacing:.02em;border-radius:2px;transition:background .2s,transform .2s;}
.btn-cta:hover{background:var(--bronze-light);transform:translateY(-1px);}
.btn-outline-dark{border:1px solid var(--line-onDark);color:var(--text-onDark);border-radius:2px;transition:border-color .2s,background .2s;}
.btn-outline-dark:hover{border-color:var(--bronze);background:rgba(176,141,87,.08);}
.btn-outline-light{border:1px solid var(--line-onLight);color:var(--text-onLight);border-radius:2px;transition:border-color .2s,background .2s;}
.btn-outline-light:hover{border-color:var(--bronze-dark);background:rgba(176,141,87,.08);}

/* ===== ticker ===== */
.ticker-wrap{background:var(--ink-2);border-bottom:1px solid var(--line-onDark);overflow:hidden;position:relative;}
.ticker-label{background:var(--ink);color:var(--bronze);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;white-space:nowrap;border-right:1px solid var(--line-onDark);}
.ticker-track{display:flex;white-space:nowrap;animation:ticker 42s linear infinite;}
.ticker-wrap:hover .ticker-track{animation-play-state:paused;}
.ticker-item{font-family:var(--font-mono);font-size:.72rem;color:var(--muted-onDark);padding:.5rem 1.6rem;white-space:nowrap;border-right:1px solid var(--line-onDark);}
.ticker-item b{color:var(--text-onDark);font-weight:600;}
.ticker-up{color:#8fae86;}
.ticker-down{color:#c07d6f;}
@keyframes ticker{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ===== hero ===== */
.hero-frame{position:relative;}
.hero-frame::before{content:"";position:absolute;top:22px;left:22px;right:-22px;bottom:-22px;border:1px solid var(--bronze);z-index:0;}
.hero-frame img{position:relative;z-index:1;}
.hero-figure-cap{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted-onDark);}

.stat-strip{border-top:1px solid var(--line-onDark);border-bottom:1px solid var(--line-onDark);}
.stat-num{font-family:var(--font-display);font-size:2.2rem;color:var(--bronze-light);font-weight:600;}
.stat-strip-light{border-top:1px solid var(--line-onLight);border-bottom:1px solid var(--line-onLight);}
.stat-num-light{font-family:var(--font-display);font-size:2.2rem;color:var(--bronze-dark);font-weight:600;}

/* ===== commodity dossier rows ===== */
.dossier-row{border-top:1px solid var(--line-onLight);}
.dossier-row:last-child{border-bottom:1px solid var(--line-onLight);}
.dossier-idx{font-family:var(--font-display);font-size:5rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--bronze-dark);opacity:.55;}
.dossier-img{aspect-ratio:4/3;overflow:hidden;}
.dossier-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.dossier-row:hover .dossier-img img{transform:scale(1.04);}
.spec-grid dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-onLight);}
.spec-grid dd{font-size:.92rem;color:var(--text-onLight);margin-top:2px;font-weight:500;}
.spec-grid div{border-top:1px solid var(--line-onLight);padding-top:.6rem;}

/* mini commodity cards (home) */
.mini-card{border:1px solid var(--line-onDark);transition:border-color .2s,transform .2s;background:var(--ink-2);}
.mini-card:hover{border-color:var(--bronze);transform:translateY(-3px);}

/* ===== process steps ===== */
.step-card{position:relative;border-top:1px solid var(--line-onLight);padding-top:1.6rem;}
.step-num{font-family:var(--font-mono);color:var(--bronze-dark);font-size:.78rem;letter-spacing:.08em;}
.step-line{position:absolute;top:0;left:0;width:34px;height:2px;background:var(--bronze);}

/* ===== trade-flow graphic ===== */
.flow-node{fill:var(--ink);stroke:var(--bronze);stroke-width:1.4;}
.flow-node-label{font-family:var(--font-mono);font-size:11px;fill:var(--text-onDark);}
.flow-path{fill:none;stroke:var(--bronze);stroke-width:1.2;stroke-dasharray:5 5;opacity:.55;}
.flow-dot{fill:var(--bronze-light);}
@keyframes flowdash{to{stroke-dashoffset:-100;}}
.flow-path{animation:flowdash 5s linear infinite;}

/* ===== leadership avatars ===== */
.avatar-ring{width:88px;height:88px;border-radius:50%;border:1px solid var(--bronze);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.6rem;color:var(--bronze);background:var(--ink-2);}

/* ===== footer ===== */
footer{background:var(--ink);border-top:1px solid var(--bronze-dark);}
.footer-link{color:var(--muted-onDark);transition:color .2s;}
.footer-link:hover{color:var(--bronze-light);}

/* ===== misc ===== */
.reveal{opacity:0;transform:translateY(22px);}
.divider-thin{height:1px;background:var(--line-onLight);}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 2px var(--bronze);}
.card-onLight{background:#fff;border:1px solid var(--line-onLight);}
.tag-chip{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-onLight);border-radius:999px;padding:.25rem .75rem;color:var(--muted-onLight);}

/* ===== portal ===== */
.portal-shell{background:radial-gradient(circle at 25% 15%, #1a2029 0%, var(--ink) 65%);}
.portal-card{background:var(--ink-2);border:1px solid var(--line-onDark);}
.spinner{border:3px solid var(--line-onDark);border-top-color:var(--bronze);border-radius:50%;width:22px;height:22px;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.toast{background:var(--ink-2);border:1px solid var(--bronze);color:var(--text-onDark);}

/* ===== dashboard ===== */
.dash-sidebar{background:#0b0d11;border-right:1px solid var(--line-onDark);}
.dash-nav-item{border-radius:4px;transition:background .15s;color:var(--muted-onDark);}
.dash-nav-item:hover,.dash-nav-item.active{background:var(--ink-2);color:var(--text-onDark);}
.dash-nav-item.active{border-left:2px solid var(--bronze);}
.mod-card{background:var(--ink-2);border:1px solid var(--line-onDark);}
.status-pill{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .65rem;border-radius:999px;}
.status-confirme{background:rgba(143,174,134,.14);color:#9ec192;}
.status-production{background:rgba(203,168,118,.14);color:var(--bronze-light);}
.status-expedition{background:rgba(122,163,199,.14);color:#8fb4d9;}
.status-transit{background:rgba(203,168,118,.14);color:var(--bronze-light);}
.status-livre{background:rgba(143,174,134,.14);color:#9ec192;}
.progress-track{background:#232833;border-radius:999px;overflow:hidden;height:6px;}
.progress-fill{background:var(--bronze);height:100%;}
.doc-row{border-top:1px solid var(--line-onDark);transition:background .15s;cursor:pointer;}
.doc-row:hover{background:var(--ink-2);}
.modal-overlay{position:fixed;inset:0;background:rgba(10,11,14,.82);z-index:95;opacity:0;pointer-events:none;transition:opacity .2s;display:flex;align-items:center;justify-content:center;padding:1.25rem;}
.modal-overlay.open{opacity:1;pointer-events:auto;}
.modal-panel{background:#faf8f3;color:#1a1d22;max-width:640px;width:100%;max-height:88vh;overflow-y:auto;border-radius:2px;}
.doc-facsimile{font-family:var(--font-mono);font-size:.8rem;line-height:1.6;}