/* ============================================================
   TOP TRADE — Website-specific layout tokens.
   Imports the root system + adds site chrome.
   Site uses LIGHT theme (overrides root dark tokens below).
   ============================================================ */
@import url("./colors_and_type.css");

/* ---------- LIGHT THEME OVERRIDES (website only) ---------- */
:root{
  --tt-bg:          #FAFBFC;
  --tt-surface-1:   #FFFFFF;
  --tt-surface-2:   #F4F6F9;
  --tt-surface-3:   #EAEEF3;

  --tt-border:        rgba(13, 24, 32, 0.08);
  --tt-border-strong: rgba(13, 24, 32, 0.16);
  --tt-border-dashed: rgba(13, 24, 32, 0.12);

  --tt-text:        #0D1820;
  --tt-text-muted:  #5A6A7C;
  --tt-text-dim:    #8895A4;

  --tt-shadow-sm:   0 3px 10px rgba(13,24,32,0.06);
  --tt-shadow-md:   0 6px 22px rgba(13,24,32,0.09);
  --tt-shadow-card: 0 24px 60px rgba(13,24,32,0.10);
  --tt-glow-green:  0 10px 28px rgba(58,169,143,0.32);
  --tt-glow-blue:   0 10px 28px rgba(43,142,196,0.32);
}

:root{
  --tt-max:   1200px;
  --tt-nav-h: 72px;
  --tt-section-py: clamp(48px, 6vw, 80px);
  --tt-content-px: clamp(20px, 5vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  background:var(--tt-bg);
  color:var(--tt-text);
  font-family:var(--tt-font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img,video{ display:block; max-width:100%; }

/* ---------- LAYOUT ---------- */
.tt-container{
  width:100%;
  max-width:var(--tt-max);
  margin:0 auto;
  padding-left:var(--tt-content-px);
  padding-right:var(--tt-content-px);
}

.tt-section{
  padding-top:var(--tt-section-py);
  padding-bottom:var(--tt-section-py);
  position:relative;
}

.tt-section--tight{ padding-top:48px; padding-bottom:48px; }

.tt-section-head{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:36px;
  max-width:760px;
}

.tt-eyebrow{
  font-size:11px;
  font-weight:700;
  color:var(--tt-text-muted);
  letter-spacing:0.2em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:12px;
}
.tt-eyebrow::before{
  content:"";
  width:24px;
  height:2px;
  background:var(--tt-gradient);
  border-radius:2px;
}

.tt-h1{
  font-weight:900;
  font-size:clamp(34px, 5vw, 56px);
  line-height:1.02;
  letter-spacing:-0.02em;
}

.tt-h2{
  font-weight:900;
  font-size:clamp(28px, 4vw, 42px);
  line-height:1.05;
  letter-spacing:-0.02em;
}

.tt-lead{
  font-size:clamp(15px, 1.4vw, 18px);
  line-height:1.55;
  color:var(--tt-text-muted);
  font-weight:500;
  max-width:60ch;
}

.tt-grad{
  background:var(--tt-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---------- BUTTONS ---------- */
.tt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:transform .2s var(--tt-ease), box-shadow .2s var(--tt-ease), background .2s var(--tt-ease);
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}

.tt-btn--primary{
  background:var(--tt-gradient);
  color:#fff;
  box-shadow:var(--tt-glow-green);
}
.tt-btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(58,169,143,0.48);
}
.tt-btn--primary:active{
  transform:scale(.98);
  box-shadow:0 4px 14px rgba(58,169,143,0.3);
}

.tt-btn--secondary{
  background:var(--tt-surface-2);
  color:var(--tt-text);
  border:1px solid var(--tt-border-strong);
}
.tt-btn--secondary:hover{
  transform:translateY(-2px);
  border-color:rgba(91,182,87,.5);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}

.tt-btn--ghost{
  background:transparent;
  color:var(--tt-text);
  border:1px solid var(--tt-border);
}
.tt-btn--ghost:hover{ border-color:var(--tt-border-strong); color:#fff; }

.tt-btn--lg{ padding:18px 28px; font-size:14px; }

.tt-tg-bubble{
  width:26px; height:26px;
  background:rgba(255,255,255,0.22);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.tt-tg-bubble svg{ width:14px; height:14px; fill:#fff; }

/* ---------- CARDS ---------- */
.tt-card{
  background:var(--tt-surface-1);
  border:1px solid var(--tt-border);
  border-radius:20px;
  padding:24px;
  position:relative;
}

.tt-card--inset{ background:var(--tt-surface-2); border-radius:14px; }

/* ---------- DIVIDER ---------- */
.tt-divider{
  height:1px;
  background:var(--tt-border);
  width:100%;
}

/* ---------- NAV ---------- */
.tt-nav{
  position:sticky; top:0; left:0; right:0;
  height:var(--tt-nav-h);
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--tt-border);
  z-index:50;
}
.tt-nav__inner{
  height:100%;
  display:flex;
  align-items:center;
  gap:24px;
}
.tt-nav__brand{
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.tt-nav__logo{
  width:44px; height:44px; flex-shrink:0;
}
.tt-nav__logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.tt-nav__name{
  font-size:18px; font-weight:900; letter-spacing:0.05em; color:var(--tt-text); line-height:1;
}
.tt-nav__name .tt-w-g{ color:#5AB657; }
.tt-nav__name .tt-w-b{ color:#2473B6; }
.tt-nav__sub{
  font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--tt-text-muted); margin-top:3px;
}
.tt-nav__links{
  display:flex; gap:28px; align-items:center; margin-left:auto;
}
.tt-nav__link{
  font-size:13px; font-weight:600; color:var(--tt-text-muted);
  transition:color var(--tt-fast);
}
.tt-nav__link:hover{ color:var(--tt-text); }
.tt-nav__cta{ margin-left:24px; }

.tt-nav__burger{
  display:none;
  width:40px; height:40px;
  background:var(--tt-surface-2);
  border:1px solid var(--tt-border);
  border-radius:10px;
  align-items:center; justify-content:center;
  margin-left:auto;
  cursor:pointer;
}
.tt-nav__burger svg{ width:20px; height:20px; stroke:var(--tt-text); }

.tt-mobile-menu{
  position:fixed;
  inset:var(--tt-nav-h) 0 0 0;
  background:var(--tt-bg);
  z-index:49;
  padding:32px var(--tt-content-px);
  display:flex; flex-direction:column; gap:8px;
  opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .25s var(--tt-ease), transform .25s var(--tt-ease);
}
.tt-mobile-menu.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.tt-mobile-menu a{
  padding:18px 16px;
  background:var(--tt-surface-1);
  border:1px solid var(--tt-border);
  border-radius:14px;
  font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between;
}
.tt-mobile-menu a svg{ width:16px; height:16px; stroke:var(--tt-text-muted); }

@media (max-width: 880px){
  .tt-nav__links, .tt-nav__cta{ display:none; }
  .tt-nav__burger{ display:flex; }
}

/* ---------- FOOTER ---------- */
.tt-footer{
  background:var(--tt-surface-2);
  border-top:1px solid var(--tt-border);
  padding-top:64px;
  padding-bottom:32px;
}