/*
 * THE ONE ELEVEN DESK — Master Brand System
 * ===========================================
 * Single source of truth for all colors, typography, spacing,
 * and component styles across the entire ecosystem.
 *
 * Import this in every page:
 *   <link rel="stylesheet" href="../branding/brand.css">
 *   or @import url('brand.css');
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════
   BRAND TOKENS — THE ONE ELEVEN PALETTE
   ══════════════════════════════════════════ */
:root {
  /* ── Backgrounds (darkest → lightest) ── */
  --oed-bg:         #060911;
  --oed-bg-2:       #0d1117;
  --oed-bg-3:       #161b28;
  --oed-bg-4:       #1c2333;
  --oed-bg-5:       #242d3f;

  /* ── Gold — Primary Brand Color ── */
  --oed-gold:       #f0b90b;
  --oed-gold-2:     #d4a00a;
  --oed-gold-3:     #c9a84c;
  --oed-gold-light: #f5e6b8;
  --oed-gold-dim:   rgba(240, 185, 11, 0.12);
  --oed-gold-glow:  rgba(240, 185, 11, 0.15);

  /* ── Signal Green — Bullish / Success ── */
  --oed-green:      #00d4aa;
  --oed-green-dim:  rgba(0, 212, 170, 0.12);

  /* ── Signal Red — Bearish / Danger ── */
  --oed-red:        #ff4757;
  --oed-red-dim:    rgba(255, 71, 87, 0.12);

  /* ── Accent Colors ── */
  --oed-blue:       #3b82f6;
  --oed-blue-dim:   rgba(59, 130, 246, 0.12);
  --oed-purple:     #a855f7;
  --oed-purple-dim: rgba(168, 85, 247, 0.12);

  /* ── Text ── */
  --oed-text:       #e8ecf4;
  --oed-text-2:     #9ba3b5;
  --oed-text-3:     #5c6478;
  --oed-text-gold:  #c9a84c;

  /* ── Borders ── */
  --oed-border:     #252d40;
  --oed-border-2:   rgba(37, 45, 64, 0.5);

  /* ── Radius ── */
  --oed-radius-sm:  6px;
  --oed-radius:     8px;
  --oed-radius-md:  12px;
  --oed-radius-lg:  16px;
  --oed-radius-xl:  20px;

  /* ── Shadows ── */
  --oed-shadow:     0 4px 20px rgba(0, 0, 0, 0.3);
  --oed-shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.4);
  --oed-shadow-gold: 0 0 30px rgba(240, 185, 11, 0.2);

  /* ── Transitions ── */
  --oed-ease:       0.2s ease;
  --oed-ease-slow:  0.3s ease;
}


/* ══════════════════════════════════════════
   GLOBAL RESET
   ══════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--oed-bg);
  color: var(--oed-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }


/* ══════════════════════════════════════════
   BRAND LOGO COMPONENT
   ══════════════════════════════════════════
   Usage:
     <div class="oed-logo">
       <div class="oed-logo__icon"></div>
       <span class="oed-logo__text">THE ONE ELEVEN DESK</span>
     </div>

   Sizes: .oed-logo--sm, .oed-logo--lg, .oed-logo--xl
   ══════════════════════════════════════════ */

.oed-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.oed-logo__icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.oed-logo__text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--oed-gold), #fff 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Size variants */
.oed-logo--sm .oed-logo__icon { width: 28px; height: 28px; }
.oed-logo--sm .oed-logo__text { font-size: 12px; }

.oed-logo--lg .oed-logo__icon { width: 48px; height: 48px; }
.oed-logo--lg .oed-logo__text { font-size: 20px; }

.oed-logo--xl .oed-logo__icon { width: 64px; height: 64px; }
.oed-logo--xl .oed-logo__text { font-size: 28px; }


/* ══════════════════════════════════════════
   INLINE SVG LOGO (for embedding directly)
   ══════════════════════════════════════════ */
/* The icon SVG code — use this HTML inside .oed-logo__icon:
   <svg viewBox="0 0 60 60" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
     <defs><linearGradient id="oedG" x1="0%" y1="0%" x2="0%" y2="100%">
       <stop offset="0%" stop-color="#f0d175"/><stop offset="100%" stop-color="#c9a84c"/>
     </linearGradient></defs>
     <rect x="10" y="28" width="9" height="22" rx="1.5" fill="url(#oedG)"/>
     <rect x="25.5" y="20" width="9" height="30" rx="1.5" fill="url(#oedG)"/>
     <rect x="41" y="10" width="9" height="40" rx="1.5" fill="url(#oedG)"/>
     <line x1="14.5" y1="27" x2="45.5" y2="9" stroke="#00d4aa" stroke-width="1.8"
           stroke-linecap="round" opacity="0.85"/>
     <circle cx="45.5" cy="9" r="2.5" fill="#00d4aa" opacity="0.9"/>
   </svg>
*/


/* ══════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════ */
.oed-heading-xl { font-size: 56px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; }
.oed-heading-lg { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.oed-heading    { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.oed-heading-sm { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.oed-heading-xs { font-size: 16px; font-weight: 700; }

.oed-text       { font-size: 15px; line-height: 1.7; color: var(--oed-text-2); }
.oed-text-sm    { font-size: 13px; line-height: 1.6; color: var(--oed-text-2); }
.oed-text-xs    { font-size: 11px; line-height: 1.5; color: var(--oed-text-3); }

.oed-mono       { font-family: 'JetBrains Mono', monospace; }
.oed-gold-text  { background: linear-gradient(135deg, var(--oed-gold), #fff 85%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.oed-label      { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oed-text-3); }
.oed-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--oed-gold); }


/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
.oed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 700;
  border-radius: var(--oed-radius-md);
  border: none; cursor: pointer;
  transition: all var(--oed-ease-slow);
}
.oed-btn--primary {
  background: linear-gradient(135deg, var(--oed-gold), var(--oed-gold-2));
  color: #060911;
  box-shadow: 0 4px 20px rgba(240, 185, 11, 0.3);
}
.oed-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(240, 185, 11, 0.4);
}
.oed-btn--secondary {
  background: var(--oed-bg-3);
  color: var(--oed-text);
  border: 1px solid var(--oed-border);
}
.oed-btn--secondary:hover {
  border-color: var(--oed-gold);
  background: var(--oed-bg-4);
}
.oed-btn--ghost {
  background: transparent;
  color: var(--oed-text-2);
  border: 1px solid transparent;
}
.oed-btn--ghost:hover { color: var(--oed-gold); }

.oed-btn--sm { padding: 8px 18px; font-size: 12px; border-radius: var(--oed-radius); }
.oed-btn--lg { padding: 16px 40px; font-size: 15px; font-weight: 800; border-radius: var(--oed-radius-md); }


/* ══════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════ */
.oed-card {
  background: var(--oed-bg-3);
  border: 1px solid var(--oed-border);
  border-radius: var(--oed-radius-lg);
  padding: 24px;
  transition: all var(--oed-ease-slow);
}
.oed-card:hover {
  border-color: var(--oed-gold);
  transform: translateY(-2px);
  box-shadow: var(--oed-shadow-lg);
}
.oed-card--gold {
  border-color: var(--oed-gold);
  box-shadow: var(--oed-shadow-gold);
}
.oed-card--gold::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--oed-gold), var(--oed-gold-2));
  border-radius: var(--oed-radius-lg) var(--oed-radius-lg) 0 0;
}


/* ══════════════════════════════════════════
   BADGES / TAGS
   ══════════════════════════════════════════ */
.oed-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.oed-badge--buy    { background: var(--oed-green-dim); color: var(--oed-green); }
.oed-badge--sell   { background: var(--oed-red-dim);   color: var(--oed-red); }
.oed-badge--gold   { background: var(--oed-gold-dim);  color: var(--oed-gold); }
.oed-badge--blue   { background: var(--oed-blue-dim);  color: var(--oed-blue); }
.oed-badge--purple { background: var(--oed-purple-dim);color: var(--oed-purple); }
.oed-badge--live   { background: var(--oed-green-dim); color: var(--oed-green); }
.oed-badge--live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--oed-green);
  animation: oed-pulse 2s infinite;
}

@keyframes oed-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }


/* ══════════════════════════════════════════
   NAVIGATION BAR
   ══════════════════════════════════════════ */
.oed-nav {
  position: fixed; top: 0; width: 100%; z-index: 100;
  padding: 12px 32px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(6, 9, 17, 0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--oed-border-2);
}
.oed-nav__links {
  display: flex; gap: 28px; align-items: center;
}
.oed-nav__links a {
  font-size: 13px; font-weight: 500;
  color: var(--oed-text-2);
  transition: color var(--oed-ease);
}
.oed-nav__links a:hover { color: var(--oed-gold); }
.oed-nav__links a.active { color: var(--oed-gold); }


/* ══════════════════════════════════════════
   SIGNAL CARDS
   ══════════════════════════════════════════ */
.oed-signal {
  padding: 14px 16px;
  border-bottom: 1px solid var(--oed-border);
  transition: background var(--oed-ease);
  cursor: pointer;
}
.oed-signal:hover { background: var(--oed-bg-3); }
.oed-signal--new {
  border-left: 3px solid var(--oed-gold);
  animation: oed-signal-glow 2s ease-in-out;
}
@keyframes oed-signal-glow { 0% { background: rgba(240, 185, 11, 0.1); } 100% { background: transparent; } }


/* ══════════════════════════════════════════
   STAT DISPLAYS
   ══════════════════════════════════════════ */
.oed-stat {
  text-align: center;
}
.oed-stat__value {
  font-size: 32px; font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
}
.oed-stat__label {
  font-size: 11px; color: var(--oed-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 4px;
}


/* ══════════════════════════════════════════
   INPUTS
   ══════════════════════════════════════════ */
.oed-input {
  width: 100%;
  padding: 10px 16px;
  background: var(--oed-bg);
  border: 1px solid var(--oed-border);
  border-radius: var(--oed-radius);
  color: var(--oed-text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color var(--oed-ease);
}
.oed-input:focus {
  border-color: var(--oed-gold);
  box-shadow: 0 0 16px rgba(240, 185, 11, 0.1);
}
.oed-input--mono {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}


/* ══════════════════════════════════════════
   DIVIDERS & DECORATORS
   ══════════════════════════════════════════ */
.oed-divider {
  height: 1px;
  background: var(--oed-border);
  border: none;
}
.oed-divider--gold {
  background: linear-gradient(90deg, transparent, var(--oed-gold-3), transparent);
  opacity: 0.4;
}
.oed-glow-ring {
  box-shadow: 0 0 60px rgba(240, 185, 11, 0.08);
}


/* ══════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════ */
.oed-toast-container {
  position: fixed; top: 60px; right: 24px;
  z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.oed-toast {
  padding: 14px 20px;
  background: var(--oed-bg-3);
  border: 1px solid var(--oed-border);
  border-radius: 10px;
  box-shadow: var(--oed-shadow-lg);
  display: flex; align-items: center; gap: 12px;
  pointer-events: auto;
  animation: oed-toastIn 0.3s ease, oed-toastOut 0.3s ease 4.7s forwards;
  min-width: 300px;
}
@keyframes oed-toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes oed-toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }


/* ══════════════════════════════════════════
   SCROLLBAR BRAND
   ══════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--oed-bg); }
::-webkit-scrollbar-thumb { background: var(--oed-bg-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--oed-gold-3); }


/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .oed-heading-xl { font-size: 36px; }
  .oed-heading-lg { font-size: 28px; }
  .oed-nav { padding: 12px 16px; }
}