/* mSamex Exchange — Design Tokens
 * Mapped from the mSamex v3 brand kit. One source of truth for the app.
 * Charcoal anchor · White paper · ONE punch color: Mint. All sans, no serif, no italic.
 */

:root {
  /* === Surfaces (dark — default) === */
  --bg:        #0B0E11;   /* page background — charcoal */
  --surface:   #14181E;   /* default card */
  --elevated:  #1C2127;   /* elevated panel / inputs */
  --line:      #252A33;   /* hairlines */
  --line-soft: #1A1E25;

  /* === Brand accent (singular) === */
  --mint:      #00D68F;
  --mint-deep: #00B377;
  --mint-glow: rgba(0, 214, 143, 0.16);
  --mint-wash: rgba(0, 214, 143, 0.08);

  /* === Text === */
  --ink:       #0B0E11;
  --snow:      #FFFFFF;
  --snow-dim:  rgba(255, 255, 255, 0.72);
  --snow-mute: rgba(255, 255, 255, 0.46);
  --mute:      #8B95A3;

  /* === Semantic (buy/sell colorblind-safe: always paired with label/shape) === */
  --up:        #00D68F;   /* long / buy / gain */
  --up-wash:   rgba(0, 214, 143, 0.10);
  --down:      #F6465D;   /* short / sell / loss */
  --down-wash: rgba(246, 70, 93, 0.10);
  --warn:      #F0B90B;   /* margin / attention — sparingly */
  --info:      #3B9EFF;

  /* === Type === */
  --font: 'Geist', 'Söhne', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* type scale */
  --t-display: 56px;
  --t-h1: 40px;
  --t-h2: 28px;
  --t-h3: 20px;
  --t-body-lg: 16px;
  --t-body: 14px;
  --t-body-sm: 13px;
  --t-caption: 11px;

  /* === Space (4px base) === */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-14: 56px; --s-16: 64px;

  /* === Radius === */
  --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 10px; --r-full: 999px;

  /* === Elevation === */
  --e-1: 0 1px 2px rgba(0,0,0,0.3);
  --e-2: 0 4px 12px rgba(0,0,0,0.35);
  --e-3: 0 12px 30px rgba(0,0,0,0.45);
  --e-4: 0 24px 60px rgba(0,0,0,0.55);

  /* === Motion === */
  --d-fast: 120ms; --d-base: 200ms; --d-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decel: cubic-bezier(0, 0, 0, 1);
  --ease-accel: cubic-bezier(0.3, 0, 1, 1);
}

/* === Light theme === */
:root[data-theme="light"] {
  --bg:        #FFFFFF;
  --surface:   #F4F6F8;
  --elevated:  #E8ECF1;
  --line:      #D8DEE6;
  --line-soft: #E8ECF1;

  --snow:      #0B0E11;
  --snow-dim:  rgba(11, 14, 17, 0.74);
  --snow-mute: rgba(11, 14, 17, 0.46);
  --mute:      #5A6472;

  --up-wash:   rgba(0, 179, 119, 0.12);
  --down-wash: rgba(246, 70, 93, 0.12);
  --mint-wash: rgba(0, 179, 119, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===== Loading / skeleton / empty states (UI.loader, UI.overlay, UI.skel*, UI.stateBox) ===== */
.mx-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 20px; }
.mx-loader-mark { display: grid; place-items: center; }
.mx-loader-label { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--mute); }

.mx-overlay {
  position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .24s var(--ease-standard);
}
.mx-overlay.in { opacity: 1; }
.mx-overlay .mx-loader { padding: 0; }

@keyframes mx-shimmer { 100% { background-position-x: -200%; } }
.mx-skel {
  display: inline-block; border-radius: 5px; vertical-align: middle;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--snow) 7%, transparent) 0%,
    color-mix(in srgb, var(--snow) 14%, transparent) 50%,
    color-mix(in srgb, var(--snow) 7%, transparent) 100%);
  background-size: 200% 100%; animation: mx-shimmer 1.3s linear infinite;
}
.mx-skel.round { border-radius: 50%; }
.mx-skel-list { display: flex; flex-direction: column; }
.mx-skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.mx-skel-stack { display: flex; flex-direction: column; }
.mx-skel-stack.right { margin-left: auto; align-items: flex-end; }
.mx-skel-spark { flex: 1; max-width: 120px; }

.mx-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 44px 24px; }
.mx-state-icon { color: var(--mute); opacity: .8; margin-bottom: 4px; }
.mx-state-icon svg { display: block; }
.mx-state-title { font-size: 15px; font-weight: 600; color: var(--snow); }
.mx-state-body { font-size: 13px; line-height: 1.5; color: var(--snow-dim); max-width: 34ch; }
.mx-state.error .mx-state-icon { color: var(--down); opacity: 1; }
.mx-state-btn {
  margin-top: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--bg); background: var(--mint); border: 0; border-radius: var(--r-full); padding: 9px 18px;
  transition: filter var(--d-fast);
}
.mx-state-btn:hover { filter: brightness(1.06); }