/* ═══════════════════════════════════════════
   theBigBull.ai — Global Design System
   Single font: Nunito
   Single source of truth for all colours
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Mono:wght@400;500&display=swap');

/* ── Dark theme (default) ── */
:root {
  --font: 'Nunito', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-mono: 'DM Mono', monospace;

  --bg:       #0A0A08;
  --nav-bg:   #111109;
  --surf:     #18180F;
  --surf2:    #201F14;
  --ticker-bg:#141410;

  --border:   rgba(201,150,26,0.14);
  --border-s: rgba(201,150,26,0.30);

  --text:     #EDE8D8;
  --text2:    #A89E88;
  --text3:    #6A6050;

  --gold:     #C9961A;
  --gold-l:   #F0C040;
  --gold-d:   #7A5A10;
  --gold-bg:  rgba(201,150,26,0.10);

  --green:        #2CC940;
  --green-bg:     rgba(44,201,64,0.10);
  --green-border: rgba(44,201,64,0.24);

  --red:        #FF5555;
  --red-bg:     rgba(255,85,85,0.08);
  --red-border: rgba(255,85,85,0.22);

  --amber:        #FEBC2E;
  --amber-bg:     rgba(254,188,46,0.10);
  --amber-border: rgba(254,188,46,0.24);

  --shadow:   rgba(0,0,0,0.45);
  --shadow-s: rgba(0,0,0,0.20);
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:       #FAF6EE;
  --nav-bg:   #FFFFFF;
  --surf:     #FFFFFF;
  --surf2:    #F2EDE0;
  --ticker-bg:#EDE7D8;

  --border:   rgba(80,55,8,0.11);
  --border-s: rgba(80,55,8,0.22);

  --text:     #1E1A0E;
  --text2:    #6A5A38;
  --text3:    #9A8A68;

  --gold:     #8A6A08;
  --gold-l:   #6A5006;
  --gold-d:   #B08010;
  --gold-bg:  rgba(138,106,8,0.08);

  --green:        #1A7A28;
  --green-bg:     rgba(26,122,40,0.08);
  --green-border: rgba(26,122,40,0.20);

  --red:        #CC2020;
  --red-bg:     rgba(204,32,32,0.06);
  --red-border: rgba(204,32,32,0.18);

  --amber:        #A07808;
  --amber-bg:     rgba(160,120,8,0.08);
  --amber-border: rgba(160,120,8,0.20);

  --shadow:   rgba(0,0,0,0.10);
  --shadow-s: rgba(0,0,0,0.05);
}

/* ── Base resets ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
input, button, select, textarea { font-family: inherit; font-size: inherit; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  transition: background 0.25s, color 0.25s;
}

/* ── Shared nav ── */
.tbb-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 2rem;
  background: var(--nav-bg);
  border-bottom: 0.5px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  gap: 1rem; flex-wrap: wrap;
  box-shadow: 0 2px 16px var(--shadow-s);
  transition: background 0.25s;
}
.tbb-logo {
  display: flex; align-items: center; gap: 0.5rem; text-decoration: none;
}
.tbb-logo-text {
  font-family: var(--font);
  font-size: 1.18rem;
  font-weight: 900;
  color: var(--gold-l);
  letter-spacing: -0.5px;
}
[data-theme="light"] .tbb-logo-text { color: var(--gold); }

/* ── Logo image ── */
.tbb-logo-img { height: 72px; width: auto; display: block; margin: -12px -8px; }
.nav-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* ── Theme toggle ── */
.theme-toggle {
  background: none;
  border: 0.5px solid var(--border);
  color: var(--text2);
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--gold-d); color: var(--gold-l); }

/* ── Shared buttons ── */
.btn {
  background: var(--gold);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.68rem 1.4rem;
  font-family: var(--font);
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  letter-spacing: 0.1px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); opacity: 1; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 0.5px solid var(--border-s);
}
.btn-ghost:hover { border-color: var(--gold-d); color: var(--gold-l); }
.nav-link { color: var(--text2); text-decoration: none; font-size: 0.83rem; font-weight: 500; transition: color 0.2s; white-space: nowrap; }
.nav-link:hover { color: var(--gold-l); }

.btn-nav {
  background: transparent;
  color: var(--text2);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 0.36rem 0.85rem;
  font-family: var(--font);
  font-size: 0.78rem; font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-nav:hover { border-color: var(--gold-d); color: var(--gold-l); }
.btn-nav.primary { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-nav.primary:hover { opacity: 0.88; }

/* ── Ticker ── */
.ticker-bar {
  overflow: hidden;
  background: var(--ticker-bg);
  border-bottom: 0.5px solid var(--border);
  padding: 0.42rem 0;
  transition: background 0.25s;
}
.ticker-track {
  display: flex; gap: 2rem;
  white-space: nowrap; width: max-content;
  animation: tscroll 45s linear infinite;
}
@keyframes tscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.t-item { font-family: var(--font); font-size: 0.73rem; color: var(--text3); display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.4rem; }
.t-sym { color: var(--text); font-weight: 600; }
.t-up  { color: var(--green); }
.t-dn  { color: var(--red); }
.t-nil { font-family: var(--font); font-size: 0.73rem; color: var(--text3); padding: 0 1rem; }

/* ── Shared inputs ── */
.field {
  width: 100%;
  background: var(--surf2);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.88rem; font-weight: 500;
  outline: none;
  transition: border-color 0.2s, background 0.25s;
}
.field:focus { border-color: var(--gold-d); }
.field::placeholder { color: var(--text3); font-weight: 400; }
.field-err { display: none; font-size: 0.77rem; color: var(--red); margin-top: 0.45rem; font-weight: 600; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  background: var(--green-bg); border: 0.5px solid var(--green-border);
  color: var(--green); padding: 0.72rem 1.3rem; border-radius: 100px;
  font-size: 0.82rem; font-weight: 700; z-index: 999;
  display: none; white-space: nowrap;
  box-shadow: 0 8px 24px var(--shadow);
}

/* ── Shared theme script (inlined in each page) ── */

@media (max-width: 600px) {
  .tbb-nav { padding: 0.85rem 1.1rem; }
}