/* ==========================================================================
   MarketIQ — Bloomberg Terminal Pro theme
   Navy + amber + mono font. Auto light/dark based on device preference.
   Class names preserved from previous versions for backwards compatibility.
   ========================================================================== */

/* ---------- DEFAULT (DARK / NIGHT) ---------- */
:root {
  /* Surfaces */
  --bg:          #0D1B2A;   /* page / app background */
  --surface:     #16263A;   /* cards, elevated */
  --surface-2:   #1A2E45;   /* nested surfaces */
  --hairline:    #1E3044;   /* borders, dividers */

  /* Text */
  --text:        #E8E4D8;   /* primary text */
  --text-dim:    #A8B4C2;   /* secondary text */
  --text-faint:  #5A6B7E;   /* tertiary / disabled */

  /* Brand */
  --amber:       #FFB627;   /* headlines, accents, ticker */
  --amber-soft:  rgba(255,182,39,0.12);

  /* Semantic grade colors */
  --up:          #4ADE80;   /* Buy / positive */
  --up-strong:   #22C55E;
  --down:        #F43F5E;   /* Sell / negative */
  --down-strong: #E11D48;
  --neutral:     #FFB627;   /* Hold */

  /* Legacy aliases so old markup keeps working */
  --navy-900:    var(--bg);
  --navy-800:    var(--surface);
  --navy-700:    var(--surface-2);
  --navy-600:    var(--hairline);
  --charcoal:    var(--surface);
  --cream:       var(--text);
  --cream-muted: var(--text-dim);
  --parchment:   var(--text-dim);
  --gold:        var(--amber);
  --gold-soft:   var(--amber-soft);
  --gold-dark:   #D98F1A;
  --emerald:     var(--up);
  --emerald-lt:  var(--up);
  --copper:      var(--down);
  --oxblood:     var(--down-strong);

  /* Typography */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --shadow-elevated: 0 4px 14px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.20);
}

/* ---------- LIGHT / DAY override ---------- */
@media (prefers-color-scheme: light) {
  :root {
    --bg:          #FAF6EE;
    --surface:     #FFFFFF;
    --surface-2:   #F3EDE0;
    --hairline:    #E8DFC9;

    --text:        #1E1915;
    --text-dim:    #5A5040;
    --text-faint:  #8A7A62;

    --amber:       #B8860B;   /* darker amber for AA contrast on cream */
    --amber-soft:  rgba(184,134,11,0.10);

    --up:          #0B7A3B;
    --up-strong:   #056B2F;
    --down:        #B02A37;
    --down-strong: #8B1A1A;
    --neutral:     #B8860B;

    --gold-dark:   #7C5A13;

    --shadow-elevated: 0 4px 12px rgba(30,25,21,0.07), 0 1px 3px rgba(30,25,21,0.05);
  }
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Utility classes preserved */
.serif      { font-family: var(--font-display); font-weight: 600; }
.display    { font-family: var(--font-display); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.num        { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.eyebrow    { font-size: 11px; font-weight: 600; color: var(--amber); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); }
.gold-text  { color: var(--amber); }
.muted      { color: var(--text-dim); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}
.card-elevated {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-elevated);
  border-radius: 6px;
}

/* Grade pills — sharp corners, mono font, inline visual hierarchy */
.grade {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  text-transform: uppercase;
  white-space: nowrap;
}
.grade.strongbuy  { color: #0D1B2A; background: var(--up-strong); border-color: var(--up-strong); }
.grade.buy        { color: var(--up); background: transparent; border-color: var(--up); }
.grade.hold       { color: var(--neutral); background: transparent; border-color: var(--neutral); }
.grade.sell       { color: var(--down); background: transparent; border-color: var(--down); }
.grade.strongsell { color: #FFFFFF; background: var(--down-strong); border-color: var(--down-strong); }

@media (prefers-color-scheme: light) {
  .grade.strongbuy  { color: #FFFFFF; }
  .grade.buy        { background: rgba(11,122,59,0.08); }
  .grade.hold       { background: rgba(184,134,11,0.08); }
  .grade.sell       { background: rgba(176,42,55,0.08); }
  .grade.strongsell { color: #FFFFFF; }
}

/* Dividers */
.hr-gold        { height: 1px; background: var(--hairline); margin: 16px 0; border: none; }
.hr-gold-solid  { height: 1px; background: var(--hairline); margin: 14px 0; border: none; }

/* Links */
.link {
  color: var(--amber);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  cursor: pointer;
  border-bottom: none;
  padding-bottom: 0;
}
.link:hover { text-decoration: underline; }

/* Monogram — now a navy tile with amber M */
.monogram {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--amber);
  color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 18px;
}

/* Score bar */
.pillar-bar-bg   { height: 6px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.pillar-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }

/* Buttons */
.btn-gold {
  background: var(--amber);
  color: #0D1B2A;
  border: none;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  cursor: pointer;
  border-radius: 4px;
}
.btn-gold:active { background: #E8A21A; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--amber);
  color: var(--amber);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  cursor: pointer;
  border-radius: 4px;
}
.btn-outline:active { background: var(--amber-soft); }

/* Timeframe segmented control */
.horizon-control {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 3px;
  border-radius: 6px;
}
.horizon-control > button {
  flex: 1;
  background: transparent;
  color: var(--text-dim);
  border: none;
  padding: 9px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.horizon-control > button.active {
  background: var(--amber);
  color: #0D1B2A;
}

/* Favorite star */
.fav-btn {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.15s, transform 0.1s;
  line-height: 1;
}
.fav-btn:hover { color: var(--amber); }
.fav-btn.active { color: var(--amber); }
.fav-btn:active { transform: scale(0.92); }

/* Animations */
.fade-in { animation: fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.pulse-dot { animation: pulse 2.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Scrollbars — hidden */
.hscroll::-webkit-scrollbar { display: none; }
.screen::-webkit-scrollbar  { width: 0; }

/* Tabbar */
.tabbar { background: var(--bg) !important; border-top: 1px solid var(--hairline) !important; }
.tab { color: var(--text-faint) !important; font-family: var(--font-mono) !important; }
.tab.active { color: var(--amber) !important; }

/* Form inputs */
input[type="text"] {
  font-family: var(--font-mono);
  font-size: 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--text);
}
input[type="text"]::placeholder { color: var(--text-faint); }
input[type="text"]:focus { border-color: var(--amber); outline: none; }

/* Kill ornaments */
.ornament { display: none !important; }

/* Toast for favorite added/removed feedback */
.toast {
  position: fixed;
  bottom: calc(100px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: #0D1B2A;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 100;
  animation: toast 2.2s forwards;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
@keyframes toast {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  15%  { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}